多列布局
columns[ˈkɑ:ləm] 多列布局
与之相关的属性或子属性如下所示
一、columns 集成column-width和column-count两个属性
二、column-width 定义每列列宽度
属性值如下所示：
1、auto 默认值，自适应
2、长度值 设置列宽。此处的列宽在功能上相当于最小宽度
三、column-count 定义分列列数
属性值如下所示
1、auto 默认值，自适应。根据窗口宽度和column-width的设置，决定显示几列。
2、数值 设置列数。此处的列数相当于最大列数，具体显示要看column-width是使用
自适应，还是使用长度值。
四、column-gap 定义列间距
五、column-rule 定义每列中间的分割线
列边线不会影响到布局(功能上类似于轮廓outline)，它会根据布局的缩放自我调整是否显示。
以上5个属性是经常使用的多列布局属性
六、column-span 定义多列布局中子元素跨列效果，Firefox不支持
此功能类似于表格元素中列元素的colspan属性，你可以用来设置文章标题(横跨所有列)
属性值如下所示
1、none 默认值，表示不跨列
2、all 表示跨所有列
七、column-fill 控制每列的列高效果，主流浏览器不支持
注意：多列布局属性css3标准格式支持度较低，请在标准格式之前加上带前缀的样式
相关文章
图文推荐
- 文章
- 推荐
- 热门新闻