用CSS3将你的设计带入下个高度

3. 多栏布局

这是新的CSS3 选择器可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏，让文本实现一个仿报纸的多栏结构。

tweetCC 在其首页使用了CSS3 多栏选择器

tweetCC 在其首页上将介绍文字显示为四栏。这四栏并非浮动的div；相反，设计师使用下面的CSS3 多栏布局：

.index #content div {
    -webkit-column-count : 4;
    -webkit-column-gap : 20px;
    -moz-column-count : 4;
    -moz-column-gap : 20px;
    }

我们可以通过这个选择器定义三件事情：栏数(column-count)、栏宽(column-width、例子中没有用到)和各栏之间的空白/间距(column-gap)。 如果column-count未设定，浏览器会在允许的宽度内容纳尽可能多的栏目。

为了在各栏时间添加一个数值的分隔，我们可以使用column-rule 属性，其功能和border 属性类似:

div {
    column-rule: 1px solid #00000;
    }

上面的这条属性，浏览器中不会看到任何效果，因为它没有分栏，如果配合上面的例子就可以了。

相关属性: column-break-after, column-break-before, column-span, column-fill.

浏览器支持: 多栏布局目前被Safari 3+，chrome，和Firefox 1.5+所支持。

扩展阅读：

• CSS3系列教程:多列/多卷
• CSS3 module: Multi-column layout: W3C Working Draft
• Columns
• CSS3 – Multi-Column Layout Demonstration
• CSS3 Columns
• Designing tweetCC
• Introduction to CSS3 – Part 5: Multiple Columns

输入您的搜索字词 提交搜索表单