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/

＆＃39;＆＃39;脏＆＃39;＆＃39;解决方案，利润率为负，但......

  .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

你应该为每个盒子设置绝对位置，然后使用左边的位置。