21 CSS3的多列布局

1、column-count

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

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

2、column-gap

column-gap 指定了列与列间的间隙

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

3、column-rule-style

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

{
 -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
 -moz-column-rule-style: solid; /* Firefox */
 column-rule-style: solid;
}

4、column-rule-width

column-rule-width 指定了两列的边框厚度

{
 -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
 -moz-column-rule-width: 1px; /* Firefox */
 column-rule-width: 1px;
}

5、column-rule-color

column-rule-color 指定了两列的边框颜⾊

{
 -webkit-column-rule-color: #ff0000; /* Chrome, Safari, Opera */
 -moz-column-rule-color: #ff0000; /* Firefox */
 column-rule-color: #ff0000;
}

6、column-rule

column-rule 是 column-rule-* 所有属性的简写

{
 -webkit-column-rule: 1px solid #ff0000; /* Chrome, Safari, Opera */
 -moz-column-rule: 1px solid #ff0000; /* Firefox */
 column-rule: 1px solid #ff0000;
}

7、column-width

column-width 指定了列的宽度

{
 column-width:100px;
 -moz-column-width:100px; /* Firefox */
 -webkit-column-width:100px; /* Safari and Chrome */
}

8、示例