html - CSS3 列：添加分栏符的更好方法

Question

有一个内容使用 CSS3 列分布在多个列中，这些列在 Firefox 和 Webkit、Opeara 中运行良好。

问题是使用 css 的分栏仅在 webkit (webkit-column-break-before) 中实现，在其他浏览器中不实现。

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

柱子的高度是固定的。

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

将不胜感激的想法。

谢谢。

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