动态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 plugin

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.例如我是怎么做的，看看here

Answer 3

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

您现在已经习惯了Even和奇怪的rules像这样抛出css

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