css多列布局划分为4列,CSS3 column多列布局介绍

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