用于WebKit的CSS诀窍[译]（4）

CSS 多卷布局

使用纯CSS实现多卷，而不用HTML的table是件相当棘手的事情。由于CSS3用于多卷布局的属性在Safari和WebKit中已经可用，你可以明确的定义卷数，正确实现你所想要的效果。先看一下下面的CSS和HTML代码：

#columns {
 -webkit-column-count: 3;
 -webkit-column-gap: 25px;
 -moz-column-count: 3;
 -moz-column-gap: 25px;
 column-count: 3;
 column-gap: 25px;
}

<div id="columns">
 <p>Column A</p>
 <p>Column B</p>
 <p>Column C</p>
</div>

这些代码定义了卷中的HTML代码。这些代码定义了这个DIV应该被分成3卷。每个段落就在他们自己的卷里面。

这些代码同样说明了一种在使用一种尚未成为W3C标准的一部分时的可靠机制.这段代码指定了”column-count”和”column-gap”属性，并带有”-webkit”和”-moz”前缀，以及没有前缀的情况。这意味着这段代码将会像基于Mozilla的浏览器一样可以在Safari和WebKit的浏览器中运行，而且一旦CSS3标准被最终确定下来之后，那些前缀就可以去掉了。

你可以在下面看到效果：

截图5. 多卷

使用这种方法， 如果浏览器不支持多卷布局，段落将一个接着一个显示。正如本文前面提到的，这些方法在不支持它们的浏览器中会被降级（也就是无效）。