CSS：不規則網格布局

Question

我正在嘗試使用 CSS 創建不規則的網格布局。 到目前為止，這是我的 Jfiddle：

http://jsfiddle.net/F94gu/1/

代碼：

HTML：

<div style="width:275px;">
     <div class="box" id="box1"></div>
     <div class="box" id="box2"></div>
     <div class="box" id="box4"></div>
     <div class="box" id="box5"></div>
     <div class="box" id="box3"></div>
     <div class="box" id="box6"></div>
</div>

CSS：

.box { margin: 2px; float:left; }
#box1 { height: 86px; width:  80px; background-color: red;}
#box2 { height: 42px; width:  161px; background-color: green;}
#box3 { height: 42px; width:  80px; background-color: blue;}
#box4 { height: 86px; width:  80px; background-color: orange;}
#box5 { height: 129px; width: 80px; background-color: yellow;}
#box6 { height: 42px; width:  161px; background-color: brown;}

我要做的是向上移動藍色塊（直接在紅色塊下方），這將允許棕色塊向左和向上移動。 下面是它當前的外觀與我正在嘗試做的圖像。

希望這是足夠的信息，如果您需要更多信息，我很樂意澄清。 我知道像素略有偏差，大約是我正在尋找的大小的四分之一，所以我將所有像素定義除以 4，這導致我忽略了一些小數（並導致線條不完全匹配）。

Answer 1

http://jsfiddle.net/F94gu/2/

''臟'解決方案，利潤率為負，但......

  .box { margin: 2px; float:left; }

    #box1 { height: 86px; width:  80px; background-color: red;}
    #box2 { height: 42px; width:  161px; background-color: green;}
    #box3 { height: 42px; width:  80px; background-color: blue;margin-top:-87px;}
    #box4 { height: 86px; width:  80px; background-color: orange;}
    #box5 { height: 129px; width: 80px; background-color: yellow;}
    #box6 { height: 40px; width:  163px; background-color: brown;margin-top:-42px;}

Answer 2

請使用： http ： //masonry.desandro.com/

它將為您節省大量時間。

Answer 3

這不是 IMO 的解決方案。 為什么不在 CSS 中使用真正的網格指令？

如果你願意，你甚至可以讓它響應。 我已經做過很多次了，它可以跨瀏覽器工作。

https://grid.layoutit.com/

Answer 4

你應該為每個盒子設置絕對位置，然后使用左邊的位置。