CSS3多列顯示是CSS3中的一個(gè)新功能。它可以讓我們將文本或其他內(nèi)容分成多個(gè)列進(jìn)行顯示。這對(duì)于一些長(zhǎng)文章或者內(nèi)容比較多的網(wǎng)頁(yè)來(lái)說(shuō)是非常有幫助的。

/* 在CSS中實(shí)現(xiàn)多列顯示需要用到 column 屬性 */
.column {
column-count: 3; /* 定義列數(shù) */
column-gap: 20px; /* 定義列間隔 */
}

在這個(gè)例子中，我們使用 column-count 屬性來(lái)定義需要顯示的列數(shù)。我們還可以使用 column-gap 屬性來(lái)定義列之間的間隔。接下來(lái)我們需要將需要顯示的內(nèi)容包含在一個(gè)容器中，這個(gè)容器就可以應(yīng)用上述樣式：

<div class="column">
<p>這里是第一段內(nèi)容。</p>
<p>這里是第二段內(nèi)容。</p>
<p>這里是第三段內(nèi)容。</p>
... // 多個(gè)子元素
</div>

通過(guò)以上樣式和HTML結(jié)構(gòu)，我們可以實(shí)現(xiàn)一個(gè)三列的多列顯示效果。

除了 column-count 和 column-gap 屬性之外，我們還可以使用其他的屬性來(lái)控制多列顯示的效果。其中，column-width 屬性可以控制每列的寬度；column-rule 屬性可以添加分隔線來(lái)分割列；column-span 屬性可以將一個(gè)內(nèi)容塊跨越多列或多行進(jìn)行顯示。

.column {
column-count: 3;
column-gap: 20px;
column-width: 200px;
column-rule: 1px solid #ccc;
}

通過(guò)這些屬性的應(yīng)用，我們可以在實(shí)現(xiàn)多列顯示時(shí)更加靈活、多樣化。