Specifies the width and number of columns:
div { columns:100px 3; -moz-columns:100px 3; /* Firefox */ -webkit-columns:100px 3; /* Safari 和 Chrome */ }
There are more instances at the bottom of the page.
Browser support
Ie | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
Internet Explorer 10 and Opera support the column property.
Firefox supports alternative -moz-column properties.
Safari and Chrome support alternative -webkit-column properties.
Note: Internet Explorer 9 and earlier browsers do not support the column property.
Definitions and usages
The columns property is a short-case property that sets column width and number of columns.
Default: | auto auto |
---|---|
Inheritance: | no |
Version: | CSS3 |
JavaScript syntax: | object .style.columns="100px 3" |
Grammar
columns: column-width column-count;
Value | Describe |
---|---|
column-width | The width of the column. |
column-count | The number of columns. |
Try it yourself - example
- Column-count
- Divide the text in the div element into three columns.
- Column-gap
- Divide the text in the div element into three columns, 30 pixels apart.
- Column-rule
- Specifies the width, style, and color between columns.
Related pages
CSS3 tutorial: CSS3 multiple columns