为什么html div / spans没有排列顺序浮动？

Question

我不知道这是否只是我的奇怪要求，但我之前没有找到任何人问过它。我的问题是：

当具有随机高度的div在多行中浮动时，为什么它们不会保持在前面的数字之下。我注意到，下一行div下面是div，它在行的上方有较少的高度。这使得第二行和其他后续div中的空格落入下一行。我在这里添加了fiddler链接jsfiddle.net/GF9kE

这张图片完全解释了我的意思。 div 4应该低于1,5，低于2，低于3. 3但是4低于3，因为3的高度最低。为什么会这样呢？对此有什么解决方法吗？我希望以浮动样式显示div，但无论高度如何都遵循顺序。

我非常感谢你阅读并帮助我。

谢谢，

Answer 1

我在这里看到了关于这个主题的一个很好的解释。

http://designshack.net/articles/css/everything-you-never-knew-about-css-floats/

解决您问题的具体摘录：

“基本上，情况的要点是浮动的元素直到指定的边缘（左边或右边），但没有进一步。除非当然在它之前有另一个浮动的元素，在这种情况下它只是下一个那个。

让我们感到困惑的真正意外在于最后的规则，其中说明浮动元素试图保持尽可能高，并且此垂直定位规则优先于推动项目的水平左/右浮动规则一个优势。“

简短答案 - 由于方框＃2将线条高度拉伸至大于＃3的高度，因此＃4在下一条线开始之前有一定的空间可以挤出。类似的逻辑适用于＃8和＃9。

---编辑---

如果您希望您的盒子以Pinterest风格流动，最好的办法是使用现有的javascript库，例如Masonry或Blocksit。

如果您想尝试避免使用JavaScript，只需使用CSS3，here's a good link you can check out。这可能符合您的需求，具体取决于需要多少浏览器兼容。

Answer 2

我想你应该看一下：http://isotope.metafizzy.co/ 他们只用CSS就说我们无法完成这项工作，请看这里CSS Floating Divs At Variable Heights