使用CSS多列布局可通過column-count和column-width設(shè)置列數(shù)與寬度，column-gap和column-rule調(diào)整間距與分隔線，column-span讓標(biāo)題跨列，break-inside避免元素?cái)嗔?，?shí)現(xiàn)美觀易讀的多欄排版。

要實(shí)現(xiàn)多列文章排版，CSS 提供了專門的 多列布局（Multi-column Layout） 模塊，可以輕松將文本內(nèi)容分成多欄顯示，類似報(bào)紙或雜志的排版效果。下面介紹幾種常用方法和關(guān)鍵屬性。

使用 column-count 和 column-width

這兩個(gè)屬性是最基本的多列控制方式：

• column-count：指定希望劃分的列數(shù)。
• column-width：指定每列的理想寬度，瀏覽器會(huì)自動(dòng)調(diào)整列數(shù)以適應(yīng)容器。

示例：

上面代碼中，瀏覽器會(huì)盡量讓每列寬 200px，并在此基礎(chǔ)上自動(dòng)決定實(shí)際列數(shù)。

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

設(shè)置列間距與分隔線

為了讓多列更清晰可讀，可以添加列之間的間距和分隔線：

• column-gap：控制列之間的空白距離，默認(rèn)是 1em。
• column-rule：在列之間畫一條分隔線，類似于 border。

示例：

這樣每列之間會(huì)有 30 像素的間隔，并有一條淺灰色細(xì)線分隔。

簡篇AI排版

AI排版工具，上傳圖文素材，秒出專業(yè)效果！

134

查看詳情

控制內(nèi)容跨列（如標(biāo)題）

有時(shí)需要某個(gè)元素（比如標(biāo)題）橫跨所有列，可以使用 column-span 屬性：

注意：目前 column-span: all 只能用于塊級(jí)元素，且父容器必須啟用了多列布局。支持度較好，但在某些舊瀏覽器中可能無效。

處理斷行與內(nèi)容分割

默認(rèn)情況下，內(nèi)容會(huì)在列之間自動(dòng)分割，但有時(shí)你希望避免某些元素被拆開：

• break-inside: avoid：防止某個(gè)元素內(nèi)部被斷開（如圖片、表格）。
• break-before 或 break-after：控制在元素前或后是否換列。

示例：

基本上就這些。通過組合使用 column-count、column-gap、column-rule 和 column-span，你可以快速實(shí)現(xiàn)美觀的多列文章布局，適合長文本展示場(chǎng)景。不復(fù)雜但容易忽略細(xì)節(jié)，比如避免圖片被截?cái)嗷驑?biāo)題錯(cuò)位。合理設(shè)置斷行規(guī)則能讓排版更專業(yè)。

以上就是如何用css制作多列文章排版的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！