為什么html div / spans不按左對齊順序排列？

Question

我不知道這是否只是我的奇怪要求，但我之前從未真正找到任何人問過這個問題。 我的問題是：

當具有隨機高度的div浮動在多行中時，為什么不將其保持在前一個數字以下。 我注意到，下一行div會低於其上一行的高度較低的div。 這使得第二行中的空格以及其他隨后的div落入下一行。 我在這里添加了提琴手鏈接jsfiddle.net/GF9kE

此圖像恰好說明了我的意思。 div 4應該低於1、5低於2、6低於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， 可以通過以下鏈接查看 。 這可能取決於您的需求，具體取決於所需的瀏覽器兼容性。

Answer 2

我認為您應該在這里看看： http : //isotope.metafizzy.co/他們說僅靠CSS不能完成此任務，請在此處查看CSS浮動高度的Divs