我不知道这是否只是我的奇怪要求，但我之前确实没有发现有人问过。我的问题是：
当具有随机高度的 div 在多行中浮动时，为什么它们不停留在前面的数字之下。我注意到，下一行 div 低于上一行的高度较低的 div。这使得第二行中的空白空间和其他后续 div 落入下一行。我在这里添加了提琴手链接jsfiddle.net/GF9kE
这张图片准确地解释了我的意思。div 4 应该低于 1，低于 2，低于 5，低于 3。但是 4 低于 3，因为 3 的高度最小。为什么会发生这种情况。有什么解决办法吗？我想以浮动样式显示 div，但无论高度如何，都遵循顺序。
我将非常感谢您阅读本文并帮助我。
谢谢，
我看过关于这个话题的一个很好的解释是here。
http://designshack.net/articles/css/everything-you-never-knew-about-css-floats/
解决您的问题的具体摘录：
“基本上，这种情况的要点是浮动元素直接到达指定的边缘（左或右），但不会更远。当然除非它之前有另一个浮动元素，在这种情况下它只是在那个旁边.
之前让我们感到困惑的真正惊喜出现在最后的规则中，该规则指出浮动元素试图保持尽可能高，并且此垂直定位规则优先于将项目推到边缘的水平左/右浮动规则。”
简短的回答 - 由于框 #2 将行高拉伸到大于 #3 的高度，因此 #4 在下一行开始之前有一些空间可以挤进去。类似的逻辑适用于#8 和#9。
- - 编辑 - -
如果您希望您的盒子以 Pinterest 风格的方式流动，最好的办法是使用现有的 javascript 库，例如Masonry或Blocksit。
如果您想尝试避免使用 javascript 并只使用 CSS3，那么您可以查看一个很好的链接。这可能适合您的需求，具体取决于需要多少浏览器兼容性。
我认为你应该看看这里：http: //isotope.metafizzy.co/ 他们说仅使用 CSS 我们无法完成这项工作，请参阅此处的CSS Floating Divs At Variable Heights