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;的子元素，防止它们被列之间的分裂。