CSS - 浮動物品的矩陣

Question

佈局0顯示瞭如何通過簡化的CSS視圖來實現此佈局。 我需要關於如何創建佈局1和2的幫助/建議/想法。 塊可以以任何順序呈現，並且它們的固定寬度（分別爲25％或50％ - 如佈局0）作品是他們沒有預定義的高度。

我更喜歡一個CSS唯一的解決方案每個佈局將有它自己的父/容器div所以如果定位是最好的一行和浮動更好的另一個然後就這樣吧。

明信片上的答案...謝謝全部

P.S.我能避免引用我的js圖書館的像http://masonry.desandro.com/例如答案...

Answer 1

我包裹在一個div 2列（在1大與width: 25% 2周小的div），讓它們float: left（除了div的是哪包裹）。

Answer 2

位置的容器內的元素絕對的，只要你喜歡的只是設置與CSS佈局，成才這樣你可以把它們：

FIDDLE

Answer 3

你也可以只用花車做，雖然在佈局1，你將不得不申請一個小保證金「絕招」（除非我忽視的東西）

Fiddle

或許更多一點difficu乍一看就明白了。如果不是絕對需要的話，我並不是絕對定位絕對的粉絲。雖然在這種情況下，我不得不承認@adeneo解決方案可能是最乾淨的方法。