多年來，CSS浮動在創建網站佈局方面一直是一個挑剔的，但必要的組件。 如果你的設計需要多列， 你轉向漂浮 。 這種方法的問題在於，儘管網頁設計師/開發人員在創建複雜的網站佈局方面表現出了令人難以置信的獨創性，但CSS浮動從未真正用於這種方式。
儘管浮動和CSS定位在未來很多年中一定會在網頁設計中佔有一席之地，但包括CSS Grid和Flexbox在內的更新佈局技術現在正在為網頁設計師提供創建網站佈局的新方法。 另一種顯示大量潛力的新佈局技術是CSS多列。
CSS專欄已經出現幾年了，但是在較老的瀏覽器（主要是舊版本的Internet Explorer）中缺乏支持，這使得許多網絡專業人員在他們的製作工作中不能使用這些風格。
隨著對IE舊版本的支持的結束，一些網頁設計師現在正在嘗試新的CSS佈局選項，包括CSS Columns，並發現他們對這些新方法的控制要比對浮點數多得多。
CSS列的基礎知識
顧名思義，CSS多列（也稱為CSS3多列佈局）允許您將內容分割為一定數量的列。 您將使用的最基本的CSS屬性是：
- 列數
- 柱隙
對於列數，您可以指定所需的列數。 柱間隙將是這些柱之間的排水溝或間距。 瀏覽器將採用這些值並將內容均勻分割為您指定的列數。
在實踐中，CSS多列的一個常見例子是將一段文本內容分割為多個列，與您在報紙文章中看到的類似。 假設你有以下的HTML標記（注意，舉例來說，我只是把一個段落的開頭，而實際上這個標記可能會有多段內容）：
您的文章標題
想像一下這裡有很多段落的文字......
如果你寫了這些CSS樣式：
.content {-moz-column-count：3; -webkit-column-count：3; 列數：3; -moz-column-gap：30px; -webkit-column-gap：30px; column-gap：30px; }這個CSS規則會將“內容”劃分成3個相等的列，它們之間的間距為30像素。 如果您需要兩列而不是三列，則只需更改該值，瀏覽器將計算這些列的新寬度以均勻分割內容。 請注意，我們確實先使用供應商前綴的屬性，然後是非前綴聲明。
儘管這很簡單，但以這種方式使用它對於網站使用來說是有問題的。 是的，您可以將一堆內容分成多列，但這可能不是Web的最佳閱讀體驗，尤其是當這些列的高度低於屏幕的“折疊”時。
然後讀者必須上下滾動才能閱讀完整內容。 儘管如此，CSS Columns的主體就像你在這裡看到的那樣簡單，它可以用來做更多的事情，而不僅僅是分割一些段落的內容 - 它確實可以用於佈局。
與CSS列的佈局
假設你有一個內容區域有3列內容的網頁。 這是一個非常典型的網站佈局，為了實現這3列，您通常會將所在的分部浮起來。使用CSS多列，這非常容易。
以下是一些示例HTML：
最新消息
內容會放在這裡...
來自我們的博客
內容會在這裡...
即將舉行的活動
p>
使這些多列的CSS從您之前看到的內容開始：
.content {-moz-column-count：3; -webkit-column-count：3; 列數：3; -moz-column-gap：30px; -webkit-column-gap：30px; column-gap：30px; }現在，這裡面臨的挑戰是，由於瀏覽器想要均勻分割這些內容，因此如果這些分割的內容長度不同，那麼瀏覽器實際上將分割各個分割的內容，將其開始添加到一列，並且然後繼續閱讀另一篇文章（您可以通過使用此代碼運行實驗並在每個部門內添加不同長度的內容來查看此內容）！
這不是你想要的。 你希望每個部門創建一個獨特的專欄，無論單個部門的內容多大或多小，你都不希望它分裂。 您可以通過添加這一行額外的CSS來實現這一點：
.content div {display：inline-block; }這將迫使那些位於“內容”內部的分部保持完整，即使瀏覽器將其分成多列。 更妙的是，由於我們在這裡沒有給出任何固定寬度的內容，所以這些列會隨著瀏覽器調整大小而自動調整大小，使它們成為響應式網站的理想應用程序。 採用這種“內聯塊”風格，您的3個部門中的每一個都將成為一個獨特的內容列。
使用列寬
除了“column-count”之外，還有一個屬性可以使用，根據您的佈局需求，它可能實際上是您網站的更好選擇。 這是“列寬”。 使用前面所示的相同的HTML標記，我們可以用CSS來做到這一點：
.content {-moz-column-width：500px; -webkit-column-width：500px; column-width：500px; -moz-column-gap：30px; -webkit-column-gap：30px; column-gap：30px; } .content div {display：inline-block; }這樣做的方式是瀏覽器使用該“列寬”作為該列的最大值。 因此，如果瀏覽器窗口的寬度小於500像素，則這3個分區將出現在一列中，即另一列的頂部。 這是用於移動/小屏幕佈局的典型佈局。
隨著瀏覽器寬度增大到足以容納2列以及指定的列間距，瀏覽器將自動從單列佈局移動到兩列。 繼續增加屏幕寬度，最終，您將獲得3列設計，我們的3個分部中的每一個都顯示在自己的列中。 同樣，這是獲得響應式多設備友好佈局的好方法，您甚至不需要使用媒體查詢來更改佈局樣式！
其他列屬性
除了此處介紹的屬性之外，還有“列規則”屬性，包括允許您在列之間創建規則的顏色，樣式和寬度值。 如果您想要將行分隔開，則可以使用這些代替邊框。
實驗時間
目前，CSS多列佈局得到很好的支持。 使用前綴時，超過94％的網絡用戶將能夠看到這些樣式，而那些不受支持的組織實際上只是Internet Explorer的舊版本，您可能不再支持這些舊版本。
現在有了這樣的支持，沒有理由不開始嘗試使用CSS列，並在生產就緒的網站中部署這些樣式。 您可以使用本文中提供的HTML和CSS開始您的實驗，並使用不同的值來查看哪些最適合您網站的佈局需求。