CSS3列空间底部

我们正在尝试创建菜单样式的布局。我使用css列属性来实现列的效果。内容是可变的，因此我们希望坚持使用此解决方案，因为我们希望浏览器以最佳方式组织内容

在下面的示例中，我们看到Chrome（版本32.0.1700.77）中存在一些奇怪的行为，而Firefox（版本24.0）中存在一些不同（但同样奇怪）的问题，因此我假设这是我们的实现

在Chrome中，我们看到第一列下方有一个很大的间隙，好像它将第三个LI放置在那里开始，然后在渲染过程中的某个点将其移动到第二列的顶部

在Firefox中，我们看到H3的“炒鸡蛋”被留在第一列的底部，而第三列的其余内容则移到了第二列的顶部

实例：

推测： -我们在OL中的每个元素上使用“break-inside:avoid；”。这可能是导致问题的原因，但我们似乎无法纠正它。

---

-基于H3问题。。。可能与此有关？或此H3标记附近的元素。

分页符属性的要点不是缩小内容以适应页面，而是帮助确定发生分页符的最佳位置

这样，如果使用“页面中断：在元素上避免”，并且当前页面上没有足够的空间来适应整个元素，浏览器将考虑插入一个中断，以便将元素强制添加到一个新页面上，理论上给它更多的空间。 但是，如果元素太大以至于将其移动到新页面上没有帮助，那么就没有什么可做的了（至少在分页符方面）

如果您事先知道打印时需要缩小内容，可以尝试在问题元素上添加缩放变换（仅限于打印介质类型），使其尺寸更易于管理

---

这对您有帮助吗？

在firefox 26.0和H3中也尝试过。不确定这是否是与funnelcake相同的版本，但尝试了那个版本，似乎效果很好。可能是Chrome和Firefox中的一个实现错误。Chrome引发的错误：Firefox中发现的错误报告具有与上述类似的症状：