css - 列计数属性在 Firefox 上不起作用

Question

我使用了 CSS3 的多列功能，使用 column-count 属性拆分成多个列。

这是我的代码:

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

它不适用于我的 Firefox 版本或 Firefox 开发人员版。该代码适用于:Google Chrome、Opera 和 Microsoft Edge。

这是一个错误还是有任何解决方案？

Answer 1

几年前我不得不从事类似的工作，据我所知，跨浏览器支持并不是万无一失的(尤其是对于较旧的浏览器)，但这应该工作得很好。

https://codepen.io/patriziosotgiu/pen/jGporg?editors=1100

将 column-break 放在 ul 标签之外的容器中。此外，如果您必须处理更复杂的布局，一些额外的 break 属性可能会有所帮助(参见 li)。

在 Mac 上使用最新的 Firefox、Chrome、Safari 进行了测试。

注意:使用 flexbox 可能会给您带来更好的结果和更新的解决方案。如果你的元素可以使用 flexbox，那值得一试。