如何以完美的網格樣式將不同大小的 DIV 浮動到左側？

Question

在這里我有一個問題。 我有許多具有相同寬度的 DIV，但它們的高度不同並且向左浮動，但它們沒有按我想要的方式出現。 它表現為

但我想讓他們喜歡

所以告訴我如何使用純 HTML-CSS 來做到這一點，沒有 JavaScript 或 JQuery 等。

Answer 1

@Tom Chew-head Millard是對的; 這是一個純粹的CSS解決方案。 我的經驗=易於使用。

http://css-tricks.com/snippets/css/multiple-columns/

==編輯MH評論后編輯

http://jsfiddle.net/qZ3N4/1/

#DEMO_ID {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
}

#DEMO_ID div {
     column-break-before: always;   
}

Answer 2

您可以嘗試使用clear屬性。 此屬性規定您應用該屬性的元素不應觸及與其包含元素相同的框的左側或右側。
因此，例如，如果您在 body 中有這 15 個 div，您可以執行以下操作：

div {
float: left;
clear: left;
}

這意味着這十五個盒子（位於相同的包含元素內）被允許在左側相互接觸。