CSS | column 属性

CSS的column属性允许开发者指定一个元素进行列布局，即将元素的内容划分为多列显示。

语法

div{
    column-count: 3; /* 指定元素分为3列 */
    column-width: 200px; /* 指定每列的宽度为200px */
    column-gap: 20px; /* 指定列之间的间隔为20px */
    column-rule: 1px solid black; /* 指定列分隔线的样式 */
}

属性值

column-count

column-count属性指定元素分为几列。该属性的值可以为一个正整数，用于表示分为的列数；也可以为auto，表示自动分列。

div{
    column-count: 3;
}

column-width

column-width属性指定每列的宽度，该属性的值可以是一个固定值（如500px），表示每列宽度为500px；也可以是一个百分数，表示每列宽度为父元素宽度的百分之多少。

div{
    column-width: 200px;
}

column-gap

column-gap属性指定列与列之间的间隔，该属性的值可以是一个固定值（如10px），表示相邻列之间间隔为10px；也可以是一个百分数，表示相邻列之间间隔为列宽度的百分之多少。

div{
    column-gap: 20px;
}

column-rule

column-rule属性指定列分隔线的样式及颜色。该属性的值可以是一个长度值（如2px）和一个颜色值（如red）的组合，也可以是一个css边框属性值（如1px solid black）。

div{
    column-rule: 1px solid black;
}

浏览器兼容性

CSS的column属性在各大现代浏览器下均已支持，但若需兼容IE9及以下版本，需增加浏览器前缀：

div{
    -webkit-column-count: 3; /* Safari 和 Chrome */
    -moz-column-count: 3; /* Firefox */
    column-count: 3; /* 标准语法 */
}

需要注意的是，在使用column属性时，需要在父元素上设置overflow属性为hidden，否则可能会出现意外的效果：

.container{
    overflow: hidden;
}