CSS3多列

CSS3 多列

在CSS3的多列布局语法功能出现之前，人们如果想让文本呈多列显示，要么使用绝对定位，手动给文本分段落，或者使用JS脚本等，我们有时候想布局成报纸，杂志等样式的多列方式（至少两列，一般三列以上），但早期CSS提供的布局方式都有着非常大的限制。如果是固定布局，那么使用浮动或定位布局都可以完成。但对于流体的多列，比如三列以上，就只能使用浮动布局进行，而浮动布局又有着很大的限制。因为它是区块性的，对于动态的内容无法伸缩自适应，所以既不能无法达到流体的多列布局。而新语法的出现，彻底改变了这样的局面。CSS3的多列布局(columns)是一种方便WEB开发者高效利用宽屏显示器的非常有用的功能特征。你会发现在很多地方都需要用到它们，特别是需要自动平衡列高度的地方。

在本章中，您将学习如下多列属性：
•column-count
•column-gap
•column-rule

浏览器支持

Internet Explorer 10 和 Opera 支持多列属性。

Firefox 需要前缀 -moz-。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9 以及更早的版本不支持多列属性。

CSS3 创建多列

column-count 属性规定元素应该被分隔的列数：

实例

把 div 元素中的文本分隔为三列：
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}

CSS3 规定列之间的间隔

column-gap 属性规定列之间的间隔：

实例

规定列之间 40 像素的间隔：
div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}

CSS3 列规则

column-rule 属性设置列之间的宽度、样式和颜色规则。

实例

规定列之间的宽度、样式和颜色规则：
div
{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}

新的多列属性

下面的表格列出了所有的转换属性：

属性描述

column-count 规定元素应该被分隔的列数。

column-fill 规定如何填充列。

column-gap 规定列之间的间隔。

column-rule 设置所有 column-rule-* 属性的简写属性。

column-rule-color 规定列之间规则的颜色。

column-rule-style 规定列之间规则的样式。

column-rule-width 规定列之间规则的宽度。

column-span 规定元素应该横跨的列数。

column-width 规定列的宽度。

columns 规定设置 column-width 和 column-count 的简写属性。

CSS3的多列布局(columns)是一种方便WEB开发者高效利用宽屏显示器的非常有用的功能特征。你会发现在很多地方都需要用到它们，特别是需要自动平衡列高度的地方。CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。