CSS多列布局

(1) 、CSS3 多列属性

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

(2)、创建多列

column-count 属性指定了需要分割的列数。

以下实例将 <div> 元素中的文本分为 3 列：

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

(3) 、创建列与列间的间隙

column-gap 属性指定了列与列间的间隙。

以下实例指定了列与列间的间隙为 40 像素：

div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

(4) 、列边框

 

column-rule-style 属性指定了列与列间的边框样式：

div {

  /* column-rule- 边框 */

            column-rule-style: dashed;

            column-rule-color: yellow;

            column-rule-width: 5px;

}