5

我使用了 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。

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

4

4 回答 4

6

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

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

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

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

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

于 2017-10-13T00:12:03.720 回答
2

根据我可以使用...

Firefox 版本 55-59 部分支持此功能：

部分支持是指不支持break-before, break-after,break-inside属性。基于 WebKit 和 Blink 的浏览器确实具有对非标准-webkit-column-break-* 属性的等效支持，以实现相同的结果（但只有autoandalways 值）。火狐不支持break-*。

如果您需要进一步的帮助，您需要发布一个代码片段来显示您的问题。

于 2017-10-12T20:23:40.970 回答
0

您需要为 ul 或主容器添加 -moz-column-gap: 50px。它将解决Firefox的问题。

于 2020-04-08T19:38:20.960 回答
0

在 Mozilla Firefox v.97.0.1 中遇到问题。在我的情况下，将属性更改为“平衡”。

列填充：平衡；

于 2022-03-02T15:47:28.070 回答