如何在纯CSS2中模拟多列布局？

Question

基本上我想制作文字＆＃34; flow＆＃34;在一个容器元素中从一列到另一列，并使其没有 CSS3 / JS。 以下是它应该如何显示的示例。它不应该只是一个元素，它只需要一次包含整个文本。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

这就是为什么人们在过去使用JavaScript实现这种效果的原因之一就是在CSS多列布局模块中添加它。

您可以获得的最接近的是手动创建列，但是选择一个点以使文本移动到下一列并将两个文本块放在不同的元素中（可以使用浮动或任何其他元素进行布局） -flexbox技术，用于并排放置块）。字体大小，列宽等之间的差异使得这不切实际。