CSS3 Tutorial (6): Create a site Multi-column _css3_css_ page authoring

Web Page Authoring WEBJX article introduction: Use CSS3 to create multiple columns for your site, instead of having a specific layer or paragraph for each column. You can use CSS3 to create multiple columns for your site without having to make specific layers or paragraphs for each column. Previous post: CSS3 tutorial (5): Web background picture with multi-background picture one

You can use CSS3 to create multiple columns for your site without having to make specific layers or paragraphs for each column.
You can use CSS3 to create multiple columns for your site without having to make specific layers or paragraphs for each column.
Previous post: CSS3 tutorial (5): Web background image
As with multi-background images, CSS3 is one of my favorite technologies. I think this CSS3 property has many potential uses outside of the newspaper and magazine layouts. If you use this method in an idea or personal site, please submit your link in the comments below, and I am happy to confirm that this method can be used in many layouts.
Cross-browser compatibility:
The better support for CSS3 multi-column browser has Firefox, Safari, Google Chrome, so we need to use the-moz and-webkit prefix. CSS3 Multi-column (width)

Above is the effect of using the following CSS3 style:
#multiColumnWidth {text-align:justify;-moz-column-width:20em;-moz-column-gap:2em;-webkit-column-width:20em;- Webkit-column-gap:2em; }
Browser support:

Firefox (3.05 ...)

Google Chrome (1.0.154 ...)

Google Chrome (2.0.156 ...)

Internet Explorer (IE7, IE8 RC1)

Opera (9.6 ...)

Safari (3.2.1 windows ...) CSS3 multiple columns (number of columns)

Above is the effect of using the following CSS3 style:
#multiColumnCount {text-align:justify;-moz-column-count:3;-moz-column-gap:1.5em;-moz-column-rule:1px Solid #deded E -webkit-column-count:3; -webkit-column-gap:1.5em; -webkit-column-rule:1px solid #dedede; }
Browser support:

Firefox (3.05 ...)

Google Chrome (1.0.154 ...)

Google Chrome (2.0.156 ...)

Internet Explorer (IE7, IE8 RC1)

Opera (9.6 ...)

Safari (3.2.1 windows ...)

The above is CSS3 Tutorial (6): Create the site multi-column _css3_css_ page production content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

