如何在純CSS2中模擬多列布局？

Question

基本上，我想在單個容器元素中使文本從一列“流”到另一列，並使其不使用 CSS3 / JS。 這是一個示例，其外觀應為。 它不應該只是一個元素，而只需一次包含整個文本。

 .container { -moz-column-width: 20em; -moz-columns: 20em; -webkit-columns: 20em; columns: 20em; } 

 <div class="container">Lorem ...</div> 

要么

 .container { column-count: 3; column-width: 30%; column-gap: 40px; } 

 <div class="container">Lorem ...</div> 

Codepen https://codepen.io/Apxa/pen/yzgOpv https://codepen.io/Apxa/pen/yzgJmL

Answer 1

這根本不可能。 CSS 2無法做到這一點。

這就是為什么在過去人們使用JavaScript實現這種效果的任何原因都將其添加到CSS多列布局模塊中的原因。

您可以得到的最接近的方法是手動創建列，但要選擇一個要移至下一列的文本，然后將兩個文本塊放在不同的元素中（可以使用浮動或其他任何pre-flexbox技術進行布置）並排放置塊）。 字體大小，列寬等之間的差異使此操作不可行。