CSS3列：更好的方式來添加列中斷

Question

有一個內容分佈在幾列使用CSS3列，在Firefox和Webkit，Opeara中工作得很好。

問題是，只有在webkit（webkit-column-break-before）中而不是在其他瀏覽器中實現了使用css的分欄符。

什麼是更好的方式來實現休息。

列的高度是固定的。

我可以考慮添加高度與列高度相等的塊元素。

將不勝感激的想法。

謝謝。

Answer 1

如果沒有看到任何代碼或您正在處理的內容，可能是column-count,column-gap和column-rule屬性有效。

.newspaper 
{ 
-moz-column-count:3; /* Firefox */ 
-webkit-column-count:3; /* Safari and Chrome */ 
column-count:3; 

-moz-column-gap:40px; /* Firefox */ 
-webkit-column-gap:40px; /* Safari and Chrome */ 
column-gap:40px; 

-moz-column-rule:4px outset #ff00ff; /* Firefox */ 
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */ 
column-rule:4px outset #ff00ff; 
} 

如果這是專門的休息，而不是列相關，看看使用 break-inside: avoid-column;和-webkit-column-break-inside: avoid;或使用display: inline-block;的子元素，防止它們被列之間的分裂。