核心提示:columns[kɑ:lm] 多列布局与之相关的属性或子属性如下所示一、columns 集成column-width和column-count两个属性二、column-width 定义每列列宽度属性值...
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标准格式支持度较低,请在标准格式之前加上带前缀的样式