如何在纯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技术进行布置）并排放置块）。 字体大小，列宽等之间的差异使此操作不可行。