彼此相鄰的定位元素（不同大小）

Question

我有很多不同大小和寬度的div。我想自動將它們放置另一格內放置它們喜歡：

任何人都知道我應該用什麼CSS屬性？我試着用浮動+顯示（幾種組合），沒有任何東西能正確工作 - 我在一行中有div - >很多空間（因爲一個大元素） - >下一行 - >等等...等等...

Answer 1

沒有使用Flexbox你會發現很難實現這種佈局。

Flexbox layout example

你可以使用一個JS插件如Masonry這將使你acheive佈局。

Answer 2

如果我理解正確，你想要做的是將它們放置在一個具有設定大小（並可能根據其內容擴展高度）的容器中，然後將它們按照展示的方式排列。我能想到的最簡單的方法是使用Twitter Bootstrap。它有一個container類，然後你可以對齊div中的元素，並且它也會使它自動響應。

提示：儘可能避免使用position: absolute和height:，因爲它會隨着網站的流動而變得混亂。

不要忘記在需要時清理浮動元素。