html - CSS3 列 : a better way to add column break

Question

使用 CSS3 列分布在多个列中的内容在 Firefox 和 Webkit、Opeara 中运行良好。

问题是 css 的分栏符只在 webkit (webkit-column-break-before) 而不是在其他浏览器中实现。

实现休息的更好方法是什么。

列的高度是固定的。

我可以考虑添加高度等于列高的 block 元素。

将不胜感激。

谢谢。

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