如何使用 css3 使文本流过 2 行 2 列？答案

【问题标题】：How do I make text flow through 2 rows of 2 columns using css3?如何使用 css3 使文本流过 2 行 2 列？
【发布时间】：2011-11-21 14:24:24
【问题描述】：

目前我有一个 1024px 宽的 div。

在那个框中有两个 CSS3 列，文本自动从一个列到下一个。

但是，我想将这两列的高度限制为 700 像素 - 一旦它们已满，我希望在它们下面再显示 2 个具有相同高度的列。

这可能吗？

【问题讨论】：

【解决方案1】：

好的。完全有可能实现我认为您将要构建的东西。然而，如果你想自己做，你需要的不仅仅是 CSS3 样式。您还需要大量的 JavaScript。

看看this Columnizer jQuery plugin（它可以完成这项工作）

【讨论】：

嘿，感谢 nowaq 的回复...所以我已经用两列流制作了盒子模型，并希望有一种 css3 方法可以让文本流入另一组列- 遗憾的是真的没有。你不能真的有两列文本延伸得如此之低，读者必须向下滚动才能阅读第一…然后一直回到开始阅读第二个。我今天发现了 Columnizer，但很高兴你推荐了它，我会试一试。如果有人想插话并建议一种 css3 方式，请告诉我！

【解决方案2】：

更新：

gimme5 提到的 Adobe CSS Regions 提案看起来很棒。不幸的是，根据 caniuse.com 的说法，现在似乎很少支持浏览器 - 它已从当前版本的 Webkit 中删除。

有一个更简单的建议可以完成所需的工作：CSS 多列布局 (http://www.w3.org/TR/css3-multicol/)，它似乎具有更广泛的浏览器支持。我还没有尝试过，但它可能对你有用，而无需大量的 Javascript。

【讨论】：