CSS3列间距底部空白

Question

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

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

在Chrome中，我们看到第一列下方有一个大的间隙，好像它首先将第三个LI放在那里，然后在渲染过程中的某个时候将其移到第二列的顶部。

在Firefox中，我们看到H3“炒蛋”被留在第一列的底部，而第三个LI的其他内容则移动到第二列的顶部。

实时示例：http://codepen.io/daviddarnes/pen/BeEIp 推测： - 我们在OL内的每个元素上都使用了“break-inside: avoid;”。这可能会导致问题，但我们似乎无法纠正它。 - 基于H3问题...可能与此有关？或者与这个H3标签附近的元素有关。

- Richard Fernandez

---

也尝试在Firefox 26.0中运行，H3被分离。不确定这是否与Funnelcake相同的版本，但尝试了那个版本，似乎可以正常工作。 - Richard Fernandez

Chrome和Firefox中可能存在实现错误。已为Chrome提出了错误报告：https://code.google.com/p/chromium/issues/detail?id=337792&q=break-inside%20avoid&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified - Richard Fernandez

在Firefox中发现了一个错误报告，其症状与上述描述相似：https://bugzilla.mozilla.org/show_bug.cgi?id=961268 - Richard Fernandez

Answer 1

页面分页属性的目的不是为了缩小内容以适应页面，而是帮助决定最佳页面断点的位置。

因此，如果您在元素上使用“page-break-inside:avoid”，并且当前页面上没有足够的空间来容纳整个元素，则浏览器将考虑插入一个断点，以便将元素强制移到新页面上，从理论上讲，这将给它更多的空间。

但是，如果该元素太大，移动到新页面也无济于事（至少在页面分页方面是如此）。

如果您预先知道您的内容在打印时需要缩小，可以尝试在问题元素上添加比例变换（限制为打印媒体类型），使其更易管理。

这对您有帮助吗？

- Graham