如何在没有列跨度的情况下分解 Firefox 中的列布局？答案

【问题标题】：How to break up column layouts in Firefox without column-span?如何在没有列跨度的情况下分解 Firefox 中的列布局？
【发布时间】：2017-08-26 05:06:47
【问题描述】：

我刚刚发现 Firefox 还不支持 CSS 属性“column-span”。如果没有“列跨度”，拆分列布局似乎是行不通的。是否有解决方法可以达到相同的结果？

【问题讨论】：

标签： css firefox css-multicolumn-layout

【解决方案1】：

Firefox 尚不支持列跨度。但是，您可以使用 HTML 结构解决此问题。

假设您需要一个 column-span:2 标题，而段落应该有 2 列。

喜欢：

<article>
   <p>Introduction - this should span everything too</p>
   <h2>This should span everything</h2>
   <p>this text should be multicolumn</p>
   <h2>This should span everything again</h2>
   <p>this text should be multicolumn again</p>
</article>

逻辑方法是这样的：

article {
   column-count: 2;
}

article > p:nth-child(1) {
  column-span: all;
}

article > h2 {
  column-span: all;
}

但如前所述，这在 Firefox 中非常糟糕。它还会导致一些文本有时在 Safari 上被截断的问题。在撰写本文时，只有 Chrome 显示出令人满意的结果。

在这种情况下，您可以完全避免列跨度：

article {
    // no need
}

article > p:nth-child(1) {
     // no need
}

article > p:nth-child(n+2)  {
   column-count: 2;
}

article > h2 {
    // no need
}

您可以直接在段落上应用样式。

结果在 Firefox、Safari 和 Chrome 上看起来不错。而且代码更少。所以也许你可以稍微调整一下你的 HTML，这样你就根本不依赖列跨度了。

【讨论】：

【解决方案2】：

这对我有用：

@supports not (column-span: all) {
    .some-css-class {
        position: absolute;
        left: 0;
        top: -10;
        width: 100%;
    }
}

我的解决方案基于此处提供的代码：https://css-tricks.com/forums/topic/any-ideas-for-firefox-column-span-solution/。您可以尝试使用 top: 0 但我将值设为负值，因为 top: 0 导致元素出现在页面的最顶部，而不是我想要的两列下方（任何负值似乎都可以解决）。

【讨论】：