html - 如何在纯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>

密码本 https://codepen.io/Apxa/pen/yzgOpv https://codepen.io/Apxa/pen/yzgJmL

Answer 1

这根本不可能。 CSS 2 无法做到这一点。

这就是为什么它被添加到 CSS 多列布局模块中的原因，以及过去人们使用 JavaScript 来实现这种效果的原因。

最接近的方法是手动创建列，但是为文本选择一个点以移动到下一列并将两个文本 block 放在不同的元素中(可以使用 float 或任何其他预布局) - 用于并排放置 block 的 flexbox 技术)。字体大小、列宽等之间的差异使得这不切实际。