columns
CSS
shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
此特性是下列 CSS 特性的简写：
/* Column width */ columns: 18em; /* Column count */ columns: auto; columns: 2; /* Both column width and count */ columns: 2 auto; columns: auto 12em; columns: auto auto; /* Global values */ columns: inherit; columns: initial; columns: unset;
columns
property may be specified as one or two of the values listed below, in any order.
<'column-width'>
<length>
or the keyword
auto
. The actual width may be wider or narrower to fit the available space. See
column-width
.
<'column-count'>
<integer>
or the keyword
auto
. If neither this value nor the column's width are
auto
, it merely indicates the maximum allowable number of columns. See
column-count
.
| 初始值 |
as each of the properties of the shorthand:
|
|---|---|
| 适用于 | Block containers except table wrapper boxes |
| 继承 | no |
| 计算值 |
as each of the properties of the shorthand:
|
| 动画类型 |
as each of the properties of the shorthand:
|
<'column-width'> || <'column-count'>
<p class="content-box"> This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns. </p>
.content-box {
columns: 3 auto;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Multi-column Layout Module
The definition of 'columns' in that specification. |
工作草案 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
columns
|
Chrome 完整支持 50 | Edge 完整支持 12 |
Firefox
完整支持
52
|
IE 完整支持 10 | Opera 完整支持 11.1 | Safari 完整支持 9 | WebView Android 完整支持 50 | Chrome Android 完整支持 50 |
Firefox Android
完整支持
52
|
Opera Android 完整支持 11.1 | Safari iOS 完整支持 9 | Samsung Internet Android 完整支持 5.0 |
完整支持
见实现注意事项。
要求使用供应商前缀或不同名称。