CSS3 column-count property
Examples
The text is divided div element into three columns:
div
{
column-count: 3;
-moz-column-count: 3; / * Firefox * /
-webkit-column-count: 3; / * Safari and Chrome * /
}
{
column-count: 3;
-moz-column-count: 3; / * Firefox * /
-webkit-column-count: 3; / * Safari and Chrome * /
}
try it"
In the bottom of this page for more examples.
Browser Support
Figures in the table represent the first browser to support the version number of the property.
Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.
属性 | |||||
---|---|---|---|---|---|
column-count | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
Attribute definitions and instructions
column-count property specifies the number of columns of an element should be divided.
Defaults: | auto |
---|---|
inherit: | no |
version: | CSS3 |
JavaScript syntax: | object .style.columnCount = 3 |
grammar
column-count:number|auto;
value | Explanation |
---|---|
number | The optimal number of columns in which the contents of the element can not flow out |
auto | The number of columns will depend on other attributes, such as: "column-width" |
Try it Yourself - Examples
Column-gap
Text in the div element into three columns, and specify the gap between the columns of a 30 pixel.
Column-rule
Rules specify between columns: width, style and color.
related articles
CSS3 tutorial: CSS3 Multiple the Columns