我如何告诉 Firefox div 可以跨越多个列？

Question

在 a page 上，当页面足够大时，我使用的布局是将文本放置在两列中。这在 Chromium 中运行良好，但在 Firefox 中运行不佳。

内容结构如下：

<main style="columns: 2;">
    <h1>Title goes here</h1>
    <div>Date, author, and other stuff.</div>
    <div>
        <p>...</p>
        <p>...</p>
        <p>...</p>
         ⋮
        <p>...</p>
    </div>
</main>

由于最后一个 <div> 包含大部分内容，Chromium 将 <h1>、第一个 <div> 和最后一个 <div> 的开头放在第一个列，以及第二列最后 <div> 的剩余部分（图 1）。然而，Firefox 90.0.2 将整个最后 <div> 移动到第二列（图 2）。

我注意到如果我删除最后一个 <div>，将所有段落作为 <main> 的直接子项，Firefox 开始显示类似于 Chromium 的内容。但是，我宁愿保持现在的 DOM，而是理解为什么 Firefox 会这样。

Firefox 中出现这种行为的原因是什么？
我应该如何更改 CSS 以便在 Firefox 中获得与在 Chromium 中获得的行为类似的行为，同时保持节点的实际结构？

图 1 Chromium 显示了我希望显示的列。

图2‖Firefox将整个文章正文移动到第二栏

Answer 1

问题是 p 元素嵌套在 div 中。您可以对 div.content 使用 display: contents 以强制浏览器 忽略其层次结构 。

contents
The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal.

Source: 2.5. Box Generation: the none and contents keywords | w3.org

基于您网站的示例：

main {
   columns: 2;
}

.content {
   display: contents;
}

<main>
    <h1>Title goes here</h1>
    <div>Date, author, and other stuff.</div>
    <div class="content">
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
    </div>
</main>

我如何告诉 Firefox div 可以跨越多个列？

How do I tell to Firefox that it's fine for a div to span multiple columns?

html

css

firefox

multiple-columns

css-multicolumn-layout