column-width
CSS
property sets the ideal column width in a multi-column layout.
The container will have as many columns as can fit without any of them having a width less than the
column-width
value. If the width of the container is narrower than the specified value, the single column's width will be smaller than the declared column width.
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.
This property can help you create responsive designs that fit different screen sizes. Especially in the presence of the
column-count
property (which has precedence), you must specify all related length values to achieve an exact column width. In horizontal text these are
width
,
column-width
,
column-gap
，和
column-rule-width
.
/* Keyword value */ column-width: auto; /* <length> values */ column-width: 60px; column-width: 15.5em; column-width: 3.3vw; /* Global values */ column-width: inherit; column-width: initial; column-width: unset;
column-width
property is specified as one of the values listed below.
<length>
Indicates the optimal column width. The actual column width may differ from the specified value: it may be wider when necessary to fill available space, and narrower when the available space is too small. The value must be strictly positive or the declaration is invalid. Percentage values are also invalid.
auto
column-count
.
| 初始值 |
auto
|
|---|---|
| 适用于 | Block containers except table wrapper boxes |
| 继承 | no |
| 计算值 | the absolute length, zero or larger |
| 动画类型 | a length |
<length> | auto
<p class="content-box"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
.content-box {
column-width: 100px;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Box Sizing Module Level 3
The definition of 'column-width' in that specification. |
工作草案 |
Adds intrinsic sizes via the keywords
min-content
,
max-content
，和
fit-content
.
|
|
CSS Multi-column Layout Module
The definition of 'column-width' in that specification. |
工作草案 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
column-width
|
Chrome 完整支持 50 | Edge 完整支持 12 |
Firefox
完整支持
50
|
IE 完整支持 10 | Opera 完整支持 11.1 | Safari 完整支持 9 | WebView Android 完整支持 50 | Chrome Android 完整支持 50 |
Firefox Android
完整支持
50
|
Opera Android 完整支持 11.1 | Safari iOS 完整支持 9 | Samsung Internet Android 完整支持 5.0 |
| Intrinsic sizes Experimental | Chrome 不支持 No | Edge 不支持 No | Firefox 不支持 No | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持
实验。期望将来行为有所改变。
见实现注意事项。
要求使用供应商前缀或不同名称。