Specifies the width of the column:
div
{
column-width:100px;
-moz-column-width:100px; /* Firefox */
-webkit-column-width:100px; /* 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-width property.
Firefox supports alternative -moz-column-width properties.
Safari and Chrome support alternative -webkit-column-width properties.
Note: The column-width property is not supported by Internet Explorer 9 and earlier browsers.
Definitions and usages
The column-width property specifies the width of the column.
| Default: | auto |
|---|---|
| Inheritance: | no |
| Version: | CSS3 |
| JavaScript syntax: | object .style.columnWidth="100px" |
Grammar
column-width: auto|length;
| Value | Describe | Test |
|---|---|---|
| auto | The width of the column is determined by the browser. | Test |
| length | Specifies the width of the column. | Test |
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