您现在的位置:首页 >> 前端 >> 内容

多列布局

时间:2017/1/17 9:59:00 点击:

  核心提示: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标准格式支持度较低,请在标准格式之前加上带前缀的样式

Tags:多列 列布 布局   
作者:网络 来源:MOONCOM的博客
  • 上一篇:5分钟入门webpack
  • 下一篇:css3传统布局