通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！
浏览器支持
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-role | 设置所有 column-rule-* 属性的简写属性。 |
| colunm-role-color | 规定列之间规则的颜色。 |
| column-role-style | 规定列之间规则的样式。 |
| column-role-width | 规定列之间规则的宽度。 |
| column-span | 规定元素应该横跨的列数。 |
| column | 规定列的宽度。 |
| columns | 规定设置 column-width 和 column-count 的简写属性。 |
column-count 属性
浏览器支持
Internet Explorer 10 和 Opera 支持 column-count 属性。
Firefox 支持替代的 -moz-column-count 属性。
Safari 和 Chrome 支持替代的 -webkit-column-count 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-count 属性。
定义和用法
column-count 属性规定元素应该被划分的列数。
语法
column-count: number|auto;
| 值 | 描述 |
|---|---|
| number | 元素内容将被划分的最佳列数。 |
| auto | 由其他属性决定列数，比如 "column-width"。 |
实例
将 div 元素中的文本分为三列：
div {
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}
点击测试
column-fill 属性
主流浏览器都不支持column-fill属性
column-gap 属性
浏览器支持
Internet Explorer 10 和 Opera 支持 column-gap 属性。
Firefox 支持替代的 -moz-column-gap 属性。
Safari 和 Chrome 支持替代的 -webkit-column-gap 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-gap 属性。
定义和用法
column-gap 属性规定列之间的间隔。
注释：如果列之间设置了 column-rule，它会在间隔中间显示。
语法
column-gap: length|normal;
| 值 | 描述 |
|---|---|
| length | 把列间的间隔设置为指定的长度。 |
| normal | 规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。 |
实例
规定列间的间隔为 40 像素：
div {
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}
点击测试
column-rule 属性
浏览器支持
Internet Explorer 10 和 Opera 支持 column-rule 属性。
Firefox 支持替代的 -moz-column-rule 属性。
Safari 和 Chrome 支持替代的 -webkit-column-rule 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-rule 属性。
定义和用法
column-rule 属性是一个简写属性，用于设置所有 column-rule-* 属性。
column-rule 属性设置列得宽度、样式和颜色规则。
语法
column-rule: column-rule-width column-rule-style column-rule-color;
| 值 | 描述 |
|---|---|
| column-role-width | 设置列之间的宽度规则。 |
| column-role-style | 设置列之间的样式规则。 |
| column-role-color | 设置列之间的颜色规则。 |
实例
规定列之间的宽度、样式和颜色规则：
div {
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari 和 Chrome */
column-rule:3px outset #ff00ff;
}
点击测试
column-rule-color 属性
浏览器支持
Internet Explorer 10 和 Opera 支持 column-rule-color 属性。
Firefox 支持替代的 -moz-column-rule-color 属性。
Safari 和 Chrome 支持替代的 -webkit-column-rule-color 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-rule-color 属性。
定义和用法
column-rule-color 属性规定列之间的颜色规则。
语法
column-rule-color: color;
| 值 | 描述 |
|---|---|
| color | 规定颜色规则。 |
实例
设置列之间的颜色规则：
div {
-moz-column-rule-color:#ff0000; /* Firefox */
-webkit-column-rule-color:#ff0000; /* Safari 和 Chrome */
column-rule-color:#ff0000;
}
点击测试
column-rule-style 属性
浏览器支持
Internet Explorer 10 和 Opera 支持 column-rule-style 属性。
Firefox 支持替代的 -moz-column-rule-style 属性。
Safari 和 Chrome 支持替代的 -webkit-column-rule-style 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-rule-style 属性。
定义和用法
column-rule-style 属性规定列之间的样式规则。
语法
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
| 值 | 描述 |
|---|---|
| none | 定义没有规则。 |
| hidden | 定义隐藏规则。 |
| dotted | 定义点状规则。 |
| dashed | 定义虚线规则。 |
| solid | 定义实线规则。 |
| double | 定义双线规则。 |
| groove | 定义 3D grooved 规则。该效果取决于宽度和颜色值。 |
| ridge | 定义 3D ridged 规则。该效果取决于宽度和颜色值。 |
| inset | 定义 3D inset 规则。该效果取决于宽度和颜色值。 |
| outset | 定义 3D outset 规则。该效果取决于宽度和颜色值。 |
点击测试
实例
设置列之间的规则：
div {
-moz-column-rule-style:dotted; /* Firefox */
-webkit-column-rule-style:dotted; /* Safari 和 Chrome */
column-rule-style:dotted;
}
点击测试
column-rule-width 属性
浏览器支持
Internet Explorer 10 和 Opera 支持 column-rule-width 属性。
Firefox 支持替代的 -moz-column-rule-width 属性。
Safari 和 Chrome 支持替代的 -webkit-column-rule-width 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-rule-width 属性。
定义和方法
column-rule-width 属性规定列之间的宽度规则。
语法
column-rule-width: thin|medium|thick|length;
| 值 | 描述 |
|---|---|
| thin | 定义纤细规则。 |
| medium | 定义中等规则。 |
| thick | 定义宽厚规则。 |
| length | 规定规则的宽度。 |
实例
设置列之间的宽度规则：
div {
-moz-column-rule-width:1px; /* Firefox */
-webkit-column-rule-width:1px; /* Safari 和 Chrome */
column-rule-width:1px;
}
点击测试
column-span 属性
浏览器支持
Internet Explorer 10 和 Opera 支持 column-span 属性。
Safari 和 Chrome 支持替代的 -webkit-column-span 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-span 属性。
定义和用法
column-span 属性规定元素应横跨多少列。
语法
column-span: 1|all;
| 值 | 描述 |
|---|---|
| 1 | 元素应横跨一列。 |
| all | 元素应横跨所有列。 |
实例
使 h2 元素横跨所有列：
h2 {
-webkit-column-span:all; /* Chrome */
column-span:all;
}
点击测试
column-width 属性
浏览器支持
Internet Explorer 10 和 Opera 支持 column-width 属性。
Firefox 支持替代的 -moz-column-width 属性。
Safari 和 Chrome 支持替代的 -webkit-column-width 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-width 属性。
定义和用法
column-width 属性规定列的宽度。
语法
column-width: auto|length;
| 值 | 描述 |
|---|---|
| auto | 由浏览器决定列宽。 |
| length | 规定列的宽度。 |
实例
规定列的宽度：
div {
column-width:100px;
-moz-column-width:100px; /* Firefox */
-webkit-column-width:100px; /* Safari 和 Chrome */
}
点击测试
columns 属性
浏览器支持
Internet Explorer 10 和 Opera 支持 column 属性。
Firefox 支持替代的 -moz-column 属性。
Safari 和 Chrome 支持替代的 -webkit-column 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 column 属性。
定义和用法
columns 属性是一个简写属性，用于设置列宽和列数。
语法
columns: column-width column-count;
| 值 | 描述 |
|---|---|
| column-width | 列的宽度。 |
| column-count | 列数。 |
实例
规定列的宽度和列数：
div {
columns:100px 3;
-moz-columns:100px 3; /* Firefox */
-webkit-columns:100px 3; /* Safari 和 Chrome */
}
点击测试