CSS3中的columns属性的用法

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

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

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;

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

QQ图片20151009103303