试图完成一个设计，并且无法解决一个小问题

Question

我有一个我正在研究的设计几乎已经完成，但是我无法让CSS做我想做的事。我想做的是这样的事情：

然而，当生成页面时，这就是输出的样子：

如何让第三个盒子在第一个盒子下面和第二个盒子下面浮动？我已经尝试过我所知道的每一个技巧，但无法让它发挥作用。我还应该提一下，每个块都是通过PHP中的循环从数据库中添加到页面中的，因此我有点不受静态内容的限制，并且无法提前知道特定块的高度是。

Answer 1

如果列数是可变的，CSS就不能真正做到（如果你想让它在所有常见的浏览器中工作），那么请使用旨在解决这个问题的jQuery Masonry。

我在这里说同样的话，但用更多的话来说：CSS two columns with known children width

Answer 2

根据第二种布局，一个好的选择是使用三个主要列。有几个可用的网格系统，包括Twitter Bootstrap和960 Grid，可以帮助您快速布局基本框架并且没有问题。当div（块元素）落入三列中的任何一列时，它们将自然地从上到下堆叠起来。

关于完美排列的div的底部，你将能够使用JavaScript来计算列的父级的总高度（这将自然地继承最高列的高度），计算总高度每列中的块元素，并使用javascript将高度差添加到每个列的最低块元素。

确保在JS高度计算中考虑填充和边距。

Answer 3

尝试将div放入3列，而不是按照它们出现的顺序堆叠。

Answer 4

这种行为是因为float规则。浮动元素的顶部不能超过页面正常流程中前面的另一个元素的顶部。我不确切地知道你如何定位你的元素，但你可能想要研究它。

这是浮动的Css规范：http://www.w3.org/TR/CSS2/visuren.html#float-rules（它的css2但规则仍然适用） 看看规则5和6