也適用於Opera的CSS列組

我們使用多列，並希望有一些塊不會在它們內部破碎。從理論上講/未來，這將與column-break-inside : avoid;工作，但現在，我們使用的是常見的解決方法：也適用於Opera的CSS列組

.columns .block { 
    display:inline-block; 
}

但是，它不會是CSS如果一些瀏覽器沒有怪怪的。而且看，如果我們使用inline-block，Opera僅在第一列顯示所有內容。

有沒有辦法在Opera（12.16）中做這項工作呢？

令我吃驚的是，超過4％的用戶仍在使用Opera。

來源

2014-03-25 Simon Ferndriger

對不起，'unit-inside-column'是什麼？你讓它看起來像是一個元素的名字。它應該是上課嗎？ –

@MrLister它應該是列布局中的塊元素的類。我改變了相應的編碼以避免混淆。 –

解決此問題的一種方法是向HTML添加額外的標記。我不知道這是否是一種選擇？然後塊可以保留塊，只有內容將是內嵌塊。

<main class="columns"> 
    <section class="block"><span>Lorem ipsum dolor sit amet, consectetur 
     adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
     dolore magna aliqua.</span></section> 
    <section class="block"><span>Ut enim ad minim veniam, quis nostrud 
     exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     consequat.</span></section> 
    <section class="block"><span>Duis aute irure dolor in reprehenderit 
     in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
     </span></section> 
</main>

我知道它看起來醜陋，但它的工程！見jsFiddle。

來源

2014-03-28 15:43:37

太好了，非常感謝！是的，它看起來很醜陋，但是，嘿，看起來不錯！ –

也適用於Opera的CSS列組

回答

相關問題