CSS3多列column-count属性

column-count 属性规定元素应该被划分的列数 

 CSS3 多列属性

---

• column-count：指定元素应该被分割的列数，数字表示
• column-fill：指定如何填充列。大部分浏览器暂时不兼容，慎用。

语法 column-fill: balance | auto;

balance：（默认值）列长短平衡，浏览器应尽量减少改变列的长度
auto：列顺序填充，他们将有不同的长度

• column-gap：设置列与列之间的距离
• column-rule：所有 column-rule-* 属性的简写，设置列之间的宽度，样式和颜色
• column-rule-color：指定两列间边框的颜色
• column-rule-style：指定两列间边框的样式
• column-rule-width：指定两列间边框的宽度
• column-span：指定元素要跨越多少列。语法：column-span: 1|all;
• column-width：指定列的宽度是多少
• columns：column-width 与 column-count 的简写属性。 columns:100px 3; 列的宽度100px和3列。

案例：

代码：

                        <style>
.column-count-2{  
    -webkit-columns:40px 2; /* Chrome, Safari, Opera */
    -moz-columns: 40px 2; /* Firefox */
    columns: 40px 2;  
    column-rule:1px solid #109620;  
    -moz-column-rule:1px solid 10962; /* Firefox */
    -webkit-column-rule:1px solid 10962; /* Safari and Chrome */ 
    column-gap:50px; 
                        
}
.column-count-2 span{ 
    display: block;
    font-weight: bold;
    font-size: 16px;
    /* column-span属性Firefox暂时不支持 请慎用 */
    column-span:all; /* 元素应该跨越所有列 */
    -webkit-column-span:all; /* Safari and Chrome  */  
 }

</style>
                        
                    

扫码关注公众号，学习更多前端技术知识。