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

Question

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

Answer 1

Firefox 尚不支持 column-span。但是，您可以使用 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，这样您就根本不依赖 column-span。