css--多列

下表列出了所有 CSS3 的多列属性：

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

column-count---创建多列

/*将文本分为三列*/
div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
} 

column-gap----列与列间的间隙

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

column-rule-style---列与列之间的边框样式

/*列与列之间的边框样式为实线*/
div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
} 


//边框厚度
column-rule-width:1px;

//边框颜色
column-rule-color:blue;

column-span---指定元素跨越多少列

h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
} 

指定列的宽度

div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}