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 的簡寫屬性 |
