css3列表布局

css3多列布局

css多列属性

 

属性	描述
column-count	指定元素应该被分割的列数。
column-fill	指定如何填充列
column-gap	指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的厚度
columns	设置 column-width 和 column-count 的简写

 

使用创建多列布局  

.box {
            /* 指定元素被分割的列数 */
            column-count: 4;
            /* 填充列 */
            column-fill: auto;
            /* 列与列之间的间隙 */
            column-gap: 40px;
            /* 列边框 */
            column-rule-color: lawngreen;
            column-rule-style: solid;
            column-rule-width: 1px;
        }