如何在沒有列跨的情況下拆分Firefox中的列布局？

Question

我剛剛發現Firefox不支持CSS屬性'column-span'。沒有「列跨度」，分解列布局似乎不可行。是否有解決方法來實現相同的結果？

Answer 1

下面是我工作：

@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會導致元素出現在頁面的最頂部，而不是像我所期望的那樣出現在兩列之下（任何負值似乎都會修復）。

Answer 2

Firefox尚未支持列跨度。但是，您可能可以通過HTML結構解決此問題。

假設您需要列跨度：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一點，所以你根本不依靠列跨度。