如何使用css3使文本流过2行2列?

时间:2011-11-21 14:24:24

标签: css3 webkit flow

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

在该框中有两个CSS3列,文本从一个自动流向下一个。

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

这可能吗?

2 个答案:

答案 0 :(得分:1)

行。完全有可能实现我认为你即将建立的东西。但是,如果你想自己做,你需要更多的CSS3样式。您还需要相当数量的JavaScript。

看看this Columnizer jQuery plugin(它可以完成这项工作)

以下是展示其工作结果的示例网站:http://welcome.totheinter.net/autocolumn/sample10.html

答案 1 :(得分:1)

更新:

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

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