CSS列VS.浮動列

Question

在HTML頁面上，我有三段文本（每段都在p標記中），我希望它們作爲彼此相鄰的列。

我知道CSS3列很適合在正確的位置神奇地打破，創建一個均勻的劃分/高度，但是隨後段落從列前面的底部開始，這取決於列的長度，導致難看的佈局。

在這種情況下是否完全錯誤地使用CSS3列？我應該用div標籤和float代替嗎？或者什麼是最好的方法？

Answer 1

假定p元件由一個父div元件包裹，則以下應該工作：

div { 
    -moz-column-width: 12em; /* or whatever width you prefer... */ 
    -ms-column-width: 12em; 
    -o-column-width: 12em; 
    -webkit-column-width: 12em; 
    column-width: 12em; 
} 

div p { 
    -moz-column-break-inside: avoid; 
    -ms-column-break-inside: avoid; 
    -o-column-break-inside: avoid; 
    -webkit-column-break-inside: avoid; 
    column-break-inside: avoid; 
} 

JS Fiddle demo，只對鉻22/Ubuntu的12.10測試。

的column-break-inside: avoid規則（和它的供應商的前綴當量）有效指示瀏覽器跨越兩個或更多個，列不打破p元件;有效地丟棄相同高度的列，以便嚴格地將每個元素完全定位在一個列中，儘管在某些情況下這也允許將多個p元素放置在一列內。

如果您嚴格按照每列強制執行一個p，則可以使用column-break-before: always;或column-break-after: always;規則。

參考文獻：

• CSS Multi-Column Layout Module, at the W3C。