CSS3 column-width 属性

CSS3 column-width 属性是用来设置多列布局中的列宽度的。它可以用在多列块级元素上，用于将一个元素分成几个列，从而形成类似于报纸的多列布局。

语法

column-width 属性语法如下：

column-width: auto|length|initial|inherit;

• auto：默认值，浏览器会自动计算列宽度；
• length：指定列宽度的具体数值，单位可以是像素（px），百分比（%），厘米（cm）等等；
• initial：使用初始值；
• inherit：从父元素继承。

示例

/* 自动计算列宽度 */
.multi-column {
  -webkit-column-count: 4; /*将元素分成4列*/
  column-count: 4;
  -webkit-column-width: auto; /* 让浏览器自动计算列宽度 */
  column-width: auto; 
}

/* 指定列宽度 */
.multi-column {
  -webkit-column-count: 4;
  column-count: 4;
  -webkit-column-width: 200px; /* 每列宽度为200像素 */
  column-width: 200px;
}

注意事项

• 设置 column-width 后，如果元素的宽度小于设置的列宽，则会自动调整列数；
• column-width 与 column-count 不能同时使用，否则 column-width 的值会被忽略；
• 为了让多列布局显示正常，需要设置元素的父元素宽度，或者使用 max-width 属性。

浏览器兼容性

column-width 是 CSS3 新增属性，目前主流浏览器都支持。在 IE 浏览器中，只有 IE10 以上版本才支持该属性。

• Chrome： 1.0 及以上版本
• Firefox： 1.0 及以上版本
• Safari： 3.1 及以上版本
• Opera： 11.1 及以上版本
• IE/Edge： 10 及以上版本

总结

CSS3 column-width 属性可以使得多列文本布局更加方便，通过设置该属性可以实现自动计算列宽和指定列宽度等功能。需要注意的是，该属性与 column-count 属性不能同时使用，且需要给父元素设置宽度或者使用 max-width 属性来保证多列布局的正常显示。