CSS3多列布局

CSS3多列布局（浏览器兼容）

---

columns属性

简写属性

• column-count属性：定义列的数量
• column-width属性：定义列的宽度

column-count属性（列的数量）

用于设置列的数量或者允许的最大列数

• auto：默认值，用于表示列的数量由其他CSS属性决定
• number：必须是正整数，用于表示定义列的数量

column-width属性（列的宽度）

用于设置列的宽度或者列的最小宽度

• auto：默认值，用于表示列的宽度由其他CSS属性决定
• length：必须是正整数，用于表示定义列的宽度

---

实例

 		.parent {
   
            /* column-count:4 ;
            column-width: 300px; */

            columns: 4 300px;
        }

        .col1,
        .col2,
        .col3,
        .col4 {
   
            height: 300px;