CSS3中的columns属性的用法

2020-07-01 17:49:25 浏览数 (1)

表格布局中可以将元素放进设置好的单元格里,将网页进行分列分行的布局,但是表格布局有很大的局限性,现在基本上不再使用表格布局,只是在有表格的时候使用表格来进行局部布局。与此同时在css3中出现了多列布局的方式,来替代表格的多列布局方式。

css3中用于多列布局的是columns属性,下面来看一下用法

代码语言:javascript复制
div
{
columns:100px 3;
-moz-columns:100px 3; /* Firefox */
-webkit-columns:100px 3; /* Safari 和 Chrome */
}

由于各个浏览器厂商没有统一,所以需要加上浏览器的前缀。上面代码的意思是说将这个div分为3列,每个最小的宽度为100px,如果浏览器的宽度不足以装下3个,那么第三个将被挤到下面,形成两行两列,并且下面一行为一列。如果columns的第一个值为auto则三列的宽度为自动,并且保证始终未3列。如果想设置每列之间的宽度,可以用column-gap的方法(其他浏览器需要加相应前缀)。同样,他也可以设置中间的分割线,方法是column-rule,这个方法和设置边框的方法是一样的 例如colunm-rule:1px dashed red;

下面在来说一下他的兼容性。

0 人点赞