CSS3提供了个新属性columns用于多列布局。在这之前,有些大家习以为常的排版,要用CSS动态实现其实是比较困难的。如竖版报纸
在我不知columns这属性之前,第一反应是:这有何难,多弄几个并列的div不就行了?但仔细想想确实很难实现,因为内容是动态的。搞几个div容易,但每个div内放多少文字呢?一篇文章该在哪行哪段剪切进不同的div内呢?你肯定不愿意为每一段文字,都在特定的地方插入div标签,那代码重用性太低了。而column属性完美的解决了这个问题,让浏览器来决定在文字该在哪里换列。你所做的只需指定每列的宽度和列数即可。
先来看看columns和它的子属性:
column-width
column-count
column-gap
column-rule
column-span
column-fill
column-width给列定义个最小的宽度。默认值为auto表示将根据column-count列的数量自动调整列宽。
column-count最大列数,不赘述。
通常上面两个参数都合并在columns中一起指定。例如columns: auto 4;就是上图的效果,会将div分成4列,并根据div的宽度640px,均分列宽为160px(其实不到160px,因为还有列间距)。代码如下:
.wrapper {
-moz-columns: auto 4;
-webki