css - 动态HTML DIV，多于float：left；

Question

我有一些大小不同的 DIV 元素，当页面填充（从左到右）时，我希望 DIV 元素在下一行垂直和水平地折叠起来。

不好的描述，但我有一个演示页面，如果你能提供帮助，你可以看看 :) http://www.techonline.co.nz/modules/navigator/navto.php?unique_ID=16

上下 DIV 之间的大间隙看起来很糟糕，特别是如果您在右侧展开 DIV。我想让它看起来整洁紧凑。

我从来没有很好的设计，所以任何帮助将不胜感激。

Answer 1

您可能想看看Jquery masonry 插件

Answer 2

在内容所在的位置创建 2 个 div。一个向左浮动，另一个向右浮动。在这些 div 中，您放置内容框。所以在你的情况下。

CSS：

 #left {float: left;}
 #right {float: right;}

和你的html：

<div id="left">
     <div class="divby2">Title 1 and rest of content</div>
     <div class="divby2">Title 3 and rest of content</div>
</div>

<div id="right">
     <div class="divby2">Title 2 and rest of content</div>
</div>

这样，您的标题 3 div 不会查看 div 2 的位置，但它会查看 div 1。例如，我是如何做到的，请看这里

Answer 3

..................................................

嗨，现在习惯了像这样Even奇怪地抛出 cssrules

.divby2:nth-child(even) {float:left;}
.divby2:nth-child(odd) {float:right}