CSS3 多列
CSS3 多列布局
CSS 多列布局允许我们轻松定义多列文本 - 就像报纸那样:
Daily Ping
Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta
nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
CSS3 多列属性
在本章中，您将学到以下多列属性:
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| column-count | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-gap | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-color | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-style | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-span | 50.0 | 10.0 | 71.0 | 9.0 | 37.0 |
| column-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
CSS3 创建多列
column-count 属性规定元素应被划分的列数。
下面的例子将 <div> 元素中的文本分为 3 列:
CSS3 指定列之间的间隙
column-gap 属性规定列之间的间隔。
下面的例子指定列之间的间距为 40 像素:
CSS3 列规则
column-rule-style 属性规定列之间的规则样式:
column-rule-width 属性规定列之间的规则宽度:
column-rule-color 属性规定列之间的规则的颜色:
column-rule 属性是用于设置上面所有 column-rule-* 属性的简写属性。
下例设置了列之间的规则的宽度、样式和颜色:
指定元素应该横跨多少列
column-span 属性规定元素应跨越多少列。
下例规定了<h2> 元素应跨所有列:
指定列宽度
column-width 属性为列指定建议的最佳宽度。
下例规定了列的建议最佳宽度应为 100px:
CSS3 多列属性
下表列出了所有的多列属性:
| 属性 | 描述 |
|---|---|
| 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 的简写属性。 |
