列宽度 | column-width
column-width
column-widthCSS属性指定最小列宽。列的数量将是可容纳的最大列数，而没有任何列的宽度小于该column-width值。实际的列宽可能小于column-width容器宽度较小的值。
/* Keyword value */
column-width: auto;
/* Different <length> values */
column-width: 6px;
column-width: 25em;
column-width: 0.3vw;
/* Global values */
column-width: inherit;
column-width: initial;
column-width: unset;
这使您可以实现适合不同屏幕尺寸的可扩展设计。特别是在column-count具有优先级的CSS属性的情况下，要设置确切的列宽度，必须指定所有长度值。在水平文本这些width，column-width，column-gap，和column-rule-width。
| 初始值 | auto |
|---|---|
| 适用于 | 去除表格外包装盒的块容器 |
| 遗传 | 没有 |
| 媒体 | visual |
| 计算值 | 绝对长度，零或更大 |
| 动画类型 | 长度 |
| 规范的顺序 | 每语法 |
语法
值
<length>是<length>给出列的最佳宽度的提示的值。实际的列宽可能会更宽（填充可用空间），或者更窄（仅当可用空间小于指定的列宽时）。长度必须严格肯定，否则声明无效。
形式语法
<length> | auto
实例
HTML内容
<div 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.
</div>
CSS内容
.content-box {
border: 10px solid #0ff;
/* Chrome, Safari, Opera prefix */
-webkit-column-width: 100px;
/* Mozilla Firefox prefix */
-moz-column-width: 100px;
column-width: 100px;
}
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Writing Modes Module Level 3The definition of 'column-width' in that specification. | Candidate Recommendation | Adds intrinsic sizes via the keywords min-content, max-content, fill-available and fit-content. |
| CSS Multi-column Layout ModuleThe definition of 'column-width' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | (Yes)-webkit 50.01 | (Yes)-webkit (Yes) | 1.5 (1.8)-moz 50.0 (50.0)2 | 10 | 11.10 | 3.0 (522)-webkit |
| Intrinsic sizes | No support | ? | No support | No support | No support | No support |
| on display: table-caption | (Yes) | (Yes) | 37 (37) | (Yes) | (Yes) | (Yes) |
| Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| Basic support | (Yes) | ? 50.01 | (Yes)-webkit (Yes) | 1.0 (1.8)-moz 50.0 (50.0)2 | (Yes) | (Yes) | (Yes) | ? 50.01 |
| Intrinsic sizes | No support | ? | ? | No support | No support | No support | No support | ? |
| on display: table-caption | (Yes) | 50.0 | (Yes) | 37.0 (37) | (Yes) | (Yes) | (Yes) | 50.0 |
