CSS3学习之Multiple Columns

• CSS3 Multiple Columns
• CSS Multi-column Layout Module
• CSS多列布局

在Web页面中，表格很早就被用来描述多列布局了，那现在在CSS3中引入的多列布局有什么不同呢？其实CSS3中的多列布局最大的好处是具有弹性，如列数可以根据视口大小的变化而改变。从HTML文档中移除table标签既有利于源码的阅读和维护，又可以使页面在不同设置上都有良好的视觉体验。

而且，CSS3多列布局其实相当简单，不信？看下面：

CSS3 Multiple Columns

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样。

上面的示例相关代码如下：

<div class="multi-column-demo">
    <p>CSS3 Multiple Columns</p>
    CSS3中新出现的多列布局...
</div>

.multi-column-demo {
    padding: 8px;
    border: 1px solid red;
    column-count: 3;
    column-rule: 2px dashed green;
}
.multi-column-demo p {
    column-span: all;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: red;
}

怎么样？是不是很简单？下面就来学习一下多列布局的相关属性。

浏览器兼容

CSS3多列布局涉及到的属性及其说明如下表所示：

Property	说明
column-count	指定元素要拆分的列数
column-gap	设置各列之间的间隙大小
column-rule-style	设置列之间分隔线样式，与 border-style 属性一样
column-rule-width	设置列之间分隔线宽度，与 border-width 属性一样
column-rule-color	设置列之间分隔线颜色，与 border-color 属性一样
column-rule	column-rule-style、column-rule-width 和 column-rule-color 三个属性的简写属性，与 border 属性一样
column-span	设置元素跨列情况，只能取1和all
column-width	设置每列的宽度

这些属性的兼容性如下所示：

Property	Chrome	IE	Firefox	Safari	Opera
column-*	50.0 4.0 -webkit-	10.0	2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit-
column-span	50.0 4.0 -webkit-	10.0	Not supported	9.0 3.1 -webkit-	37.0 15.0 -webkit-

基本上所有的属性兼容情况一样，因此没有将所有属性一一列出，而是使用 column-* 代替了，只有 column-span 属性有点不同，将其单独列出。

除了上面列的多列布局相关属性外，还有 column-fill 、break-before 、break-after 和 break-inside 等属性，这些属性还没有广泛被支持，在这里也暂时没有去学习。

这些 break-* 属性相关知识可参考：Column breaks

多列布局属性

column-count

column-count 用于指定元素需要拆分的列数，一般指定一个正整数；其默认值为 auto，表示列数根据其它属性而定，比如根据 column-width 属性计算。

1) 指定 column-width 属性为3列

.multi-column-demo-1 {column-count: 3;}

大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。 遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一樽还酹江月。

2) 不指定 column-width 属性，指定了 column-width 属性为400px，浏览器分为两列

.multi-column-demo-2 {column-width: 400px;}

大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。 遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一樽还酹江月。

column-gap

column-gap 属性用来设置各列之间的间隙大小，属性性是一个长度值，单位可以是px或em等，但不能接受百分比；其默认值为 normal，W3C对 normal 的建议值为 1em，具体间隙依赖浏览器的实现。

如果元素设置了 column-rule 属性，则出现在间隙的中间位置

1) 下面的示例将 column-gap 属性设置为3em，可以看到，列之间的间隙明显变大

.multi-column-demo-3 {
    column-count: 3;
    column-gap: 3em;
}

大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。 遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一樽还酹江月。

column-rule-*

column-rule-\* 属性包含 column-rule-style、column-rule-width 和 column-rule-color 三个属性，它们还有一个简写属性就是 column-rule，它们的关系就像 border-* 和 border 属性的关系一样。

column-rule 属性设置各列之间的分隔线样式，column-rule-style、column-rule-width 和 column-rule-color 三个属性分别来设置分隔线的样式、宽度和颜色。

1) 下面的示例为各列设置了 1px solid green 样式的分隔线，采用的是 column-rule 简写属性，其对应的独立属性也很简单，就不再演示了

.multi-column-demo-4 {
    column-count: 3;
    column-rule: 1px solid green;
}

大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。 遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一樽还酹江月。

column-span

column-span 属性用来设置一个元素要跨多少列，这样描述其实不准确，更好的说法应该是设置一个元素是否要跨列显示，因为该属性只能设置为两个值：1和all；默认值是1，表示元素不跨列，而all则表示元素跨所有的列。

1) 在下面的示例中我们加了个标题，将标题放在一个span元素中，并将该元素设置为跨所有列显示，这个属性也是挺好理解的

.multi-column-demo-5 {
    column-count: 2;
    column-rule: 1px solid green;
}
.multi-column-demo-5 span {
    display: block;
    width: 100%;
    column-span: all;
    text-align: center;
    color: green;
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: bold;
}

念奴娇 赤壁怀古 - 苏轼大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。 遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一樽还酹江月。

columns

columns 属性是 column-width 和 column-count 两个属性的简写属性，其默认值是 auto auto；感觉这两个属性同时设置会冲突，经试验好像是 column-width 属性优先级高，同时设置的话会根据 column-width 属性来计算列数。