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;
        }

  

 posted on 2020-08-21 20:29  wen22  阅读(178)  评论(0编辑  收藏  举报