DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!
列在内容流动和平衡方面做得很好。 不幸的是,并非所有元素都能流畅地流动。 有时元素会卡在列之间。

幸运的是,您可以告诉浏览器使用 break-inside
将特定元素保持在一起。
li {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
目前,该属性普遍接受 auto
和 avoid
值。
在多列布局中的元素上使用 avoid
,以防止属性分开。
再仔细看看此属性的语法,因为浏览器之间存在一些差异。
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
该属性效仿 分页符 属性,并共享相同的值。 目前,Firefox 使用 page-break-inside
。
其他资源
浏览器支持
分页符属性
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
108 | 132 | 11 | 108 | TP |
移动设备/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 18.0 |
多列布局支持
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
130 | 132 | 10 | 12 | 10 |
移动设备/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 10.0-10.2 |
亲爱的 Chris,
我发现使用
-webkit-column-break-inside: avoid
在容器内的元素数量变化时表现不一致。我调整了你的笔来演示它。http://codepen.io/jochemnabuurs/pen/ugDJB
这是 chromium 上的错误请求:https://bugs.chromium.org/p/chromium/issues/detail?id=628927
以下短语中指向**分页符**的链接已损坏...
“该属性继承自**分页符**属性并共享相同的值。”
我的第二列的第一行是缩进/居中/错位,但仅在 Firefox 中。请查看 http://www.ams-net.org/~testing/columns.php
当容器(我们在其上应用列布局)包含多个元素时,这将起作用。
如果只有一个元素,Firefox 会将其分解以使其适合所有列(这也有另一个 Firefox 错误:第一个切割块中的链接和悬停不起作用)。为了避免这种行为,我仅在它是列表中的唯一元素时,使用以下方法在块上应用
display: inline-block
这可能会产生其他故障,但对我来说已经足够了(至少在 Firefox 持续分解单个元素时是这样)。
我怀疑每次在容器中存在 X 个元素时,Firefox 都会出现这种情况,我在其中应用 N 列,并且 X<N)。
非常感谢。救了我
刚刚救了我……非常感谢
谢谢。我同意 CSS 列在项目少于我们指定的列行时存在问题。它在 FF 和 IE 上会断裂。
感谢这篇文章!它很棒……几乎。在 codepen 示例中,我看到所有列都没有与容器的顶部边缘齐平。当我调整窗口大小,有时一两个列会出现在顶部有填充,有时没有。
您知道如何解决这种不一致吗?我一直在努力研究这个问题,但没有找到解决方案。:(
谢谢!
我认为我找到了拼图的缺失部分:当我删除
margin-bottom
时,顶部边缘对齐问题就消失了。非常有用,谢谢!
非常有见地。我有一个问题,我在连续页面上有两列分页媒体,但它不是从第 1 页左列包裹到第 1 页右列然后继续到第 2 页左列,而是从第 1 页左列到第 2 页左列然后返回到第 1 页右列。您知道如何解决这个问题吗?在 Chrome 中使用打印预览时,它会正确显示,但我需要使用 Acrobat 将 HTML 转换为 PDF,在这种情况下会导致这个问题……
您是使用列计数为 2 还是使用列宽度为 50% 来设置列?也许列宽度为 50% 会导致 Acrobat 转换器将第二页视为新列,而不是第一页列的延续。
或者,如果您没有锁定在 Acrobat 上,也许您可以使用 Chrome 的内置导出功能?例如
chrome –headless –print-to-pdf=”d:\{{path and file name}}.pdf” https://google.com
嗨,我在 IE11 中使用“break-inside: avoid”时遇到了列问题,我在父 div 的底部发现了一个随机空间,只有在不使用“break-inside: avoid”时才能将其消除,但随后子 div 会断裂并溢出到下一列。
我在 Codepen 上复制了一个简化的示例:codepen.io/hcone5006/debug/bxmmpM/ 在 IE11 中。
有人遇到过这个问题吗?
最后通过将
display: inline-block;
添加到我们避免 break-inside 的元素来解决它。希望这有帮助。这并不能阻止子元素被分割。
只有
display: inline-block
有效display: inline-block
帮助我解决了 Firefox 中的断裂问题。谢谢您2020
对于所有仍在寻找解决方法的人来说
CSS 列在 Firefox/IE11 中断裂。
当列项少于列数时断裂
也尝试
overflow: hidden;
在列内的项目上。
希望它有帮助。它对我有用!
嗨,我来这里是为了获得 Safari 浏览器问题的解决方案或建议,该问题会导致将上面的元素复制到 css 列跨度元素
http://www.graphicguru.in/csscolumns.html
我已经向 webkit 团队报告了,但还没有得到回复,在这里寻求帮助
https://bugs.webkit.org/show_bug.cgi?id=214219