CSS3 column-width 属性
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 属性来保证多列布局的正常显示。