CSS 多列
CSS 多列布局
CSS 多列布局可以轻松定义多列文本——就像报纸一样
每日推送
Lorem ipsum
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 属性指定了列的建议最优宽度。
以下示例指定了列的建议最优宽度应为 100px
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 的简写属性 |
