DigitalOcean 为您旅程的各个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分！
在多列布局中，您可以使用 column-span 使元素跨越列。
h2 {
-webkit-column-span: all;
column-span: all;
}将 column-span 分配给多列布局内的元素，使其成为跨越元素。 多列布局将从下一个非跨越元素处继续。
column-span 的值可以是 all 或 none。
将元素设置为 column-span: all 以使其跨越列。
该属性的值 none 是跨越元素的终止开关。 当使用媒体查询时，您可能会使用它来告诉跨越元素停止跨越。
查看 CodePen 上的 CSS-Tricks (@css-tricks) 编写的 column-span 示例。
相关属性
附加资源
浏览器支持
Firefox 不支持此 column-span，但有一些 有趣的解决方法。
以下是多列布局的总体支持情况
这些浏览器支持数据来自 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 |
不要忘记您的前缀！
我在 Safari 中结合使用
-webkit-column-span:all和-webkit-column-break-inside:avoid时，遇到了一个奇怪的 bug。看看那里“Module-3”发生了什么：http://codepen.io/hand_coding/pen/vEjYyJ
（注意：请注意，从
.module类中删除overflow:hidden可能会使您的浏览器无响应）我今天也遇到了这个 bug，3 年后有解决方法吗？
没有，网站上没有解决 Safari 奇怪问题的解决方案。Safari 13.1 Technology Preview 也显示了这个问题，我在网上只能找到一个关于这个问题的另一个提及。
在 Firefox 中无法正常工作。太糟糕了。
因为这是一个 Safari 问题，所以并不太糟糕。
Chrome 正确地渲染了 column-span，而 Safari 在 column-span 元素之前和之后都渲染了标题“Module 3”。
我有一个页面，其中一个带有
column-span:all;的 h1 标题出现在文本的开头，在约 1040px 的窗口宽度下跳转到末尾。我还没有找到任何解决此 bug 的方法。抱歉，我忘记说是在 Safari 桌面版和 iOS 版中。