CSS 多列布局
CSS 多列布局
CSS 多列布局允许轻松定义多列文本，就像报纸一样。
每日 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.
CSS 多列属性
在本节中，您将了解以下多列属性。
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 |
CSS 创建多列
使用 column-count 属性指定元素应划分为多少列。
以下示例将 <div> 元素中的文本划分为 3 列：
CSS 指定列间距
使用 column-gap 属性指定列之间的间距。
以下示例指定列之间的间距为 40 像素。
CSS 列规则
使用 column-rule-style 属性指定列之间规则的样式。
使用 column-rule-width 属性指定列之间规则的宽度。
使用 column-rule-color 属性指定列之间规则的颜色。
使用 column-rule 属性可以作为速记属性设置上面所有 column-rule-* 属性。
以下示例设置列之间规则的宽度、样式和颜色。
指定元素应跨越多少列
使用 column-span 属性指定元素应跨越多少列。
以下示例指定 <h2> 元素应跨越所有列。
指定列宽度
使用 column-width 属性指定列的建议最佳宽度。
以下示例指定列的建议最佳宽度应为 100 像素。
CSS 多列属性
下表列出了所有多列属性：
| 属性 | 描述 |
|---|---|
| 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 的简写属性 |
