像谷歌webstore的CSS框佈局

Question

我有一個網站，有像谷歌網絡商店的設計。這是什麼樣子：

如果你能在2盒未填滿的空間上方的底部區域發現。

包裝箱由ul包裝和項目在li。列表項目是左邊浮動和ul已清楚。

這裏是鏈接的jsfiddle http://jsfiddle.net/wTCKr/

請建議CSS或將解決這個問題的任何JS。謝謝。

Answer 1

如果你想在右邊的大箱子，你需要把它們漂浮到正確的位置，這樣左邊的小箱子才能正確填充。

<li class="items big" style="float:right"> 

請參閱this updated JS Fiddle fork。

如果您將大方塊放在中間，這不會解決問題。如果你還需要支持這種情況，我會建議現在是時候使用絕對定位和一些jQuery或JS來爲你做佈局。

更新：我喜歡快速挑戰，所以我給你寫了一些JS to do absolute positioning。我使用jQuery，但是如果您不在您的網站上使用jQuery，則可以將其轉換爲直線JS。該代碼假定您有正確數量的有效訂單（例如，如果所有其他行都填充了小方框，則不能在最後一行放置一個大方框）。

Answer 2

你可以做ul { top: -200px or margin-top: -200px;}，這將工作。