使用CSS3，您可以將元素的文本內(nèi)容分成多列。
CSS3引入了多列布局模塊，用于以簡單有效的方式創(chuàng)建多個列布局?，F(xiàn)在，您無需使用浮動框即可創(chuàng)建像在雜志和報紙上看到的布局。這是一個使用CSS3多列布局功能將一些文本分為三列的簡單示例。
p {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}測試看看?/?CSS屬性，column-count和column-width指定是否以及將顯示多少列。column-count屬性設(shè)置multicol元素內(nèi)的列數(shù)，而column-width屬性設(shè)置所需的列寬。
p {
-webkit-column-width: 150px; /* Chrome, Safari, Opera */
-moz-column-width: 150px; /* Firefox */
column-width: 150px;
}測試看看?/?注：column-width指定了列的最佳寬度。 但是，實際列寬可能會根據(jù)可用空間而變寬或變窄。 此屬性不應(yīng)與column-count屬性一起使用。。
您可以使用該column-gap屬性指定列之間的間隔。每列之間應(yīng)用相同的間隙。默認(rèn)間隔是normal，它等于1em。
p {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 100px;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 100px;
column-count: 3;
column-gap: 100px;
}測試看看?/?您也可以使用column-rule屬性在各列之間添加一條線，即規(guī)則。它是用于在單個聲明中設(shè)置規(guī)則的寬度，樣式和顏色的簡寫屬性。該column-rule屬性采用與border和outline相同的值。
p {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 100px;
-webkit-column-rule: 2px solid red;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 100px;
-moz-column-rule: 2px solid red;
column-count: 3;
column-gap: 100px;
column-rule: 2px solid red;
}測試看看?/?注意：列規(guī)則的寬度不會影響列框的寬度，但是如果列規(guī)則的寬度大于間隙，則相鄰的列框?qū)⑴c該規(guī)則重疊。
下表簡要概述了所有多列屬性：
| 屬性 | 描述 |
|---|---|
| column-count | 指定多列元素內(nèi)的列數(shù)。 |
| column-fill | 指定內(nèi)容如何跨列分布。 |
| column-gap | 指定列之間的間隙。 |
| column-rule | 指定要在每列之間繪制的直線或標(biāo)尺。 |
| column-rule-color | 指定列之間的規(guī)則的顏色。 |
| column-rule-style | 指定列之間的規(guī)則樣式。 |
| column-rule-width | 指定列之間的規(guī)則寬度。 |
| column-span | 指定一個元素跨越多少列。 |
| column-width | 指定列的最佳寬度。 |
| columns | 用于同時設(shè)置column-width和column-count屬性的簡寫屬性。 |