列计数属性在 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

几年前我不得不从事类似的工作，就我所记得的而言，跨浏览器支持并不是万无一失的（尤其是对于旧浏览器），但这应该可以很好地工作。

将放入标签column-break外的容器中ul。此外，如果您必须处理更复杂的布局，一堆额外的break属性可能会有所帮助（请参阅参考资料li）。

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

注意：使用 flexbox 可能会给你一个更好的结果，一个更新的解决方案。如果您的项目可以使用 flexbox，那么值得一试。