HTML/CSS网格布局

Question

如何更改此网格布局，使第二行块位于其上方相应块的正下方，而不是形成全新的行？

http://jsfiddle.net/AndyMP/wSvrN/

body { 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
} 
#container { 
    position: absolute; 
    width: 60%; 
    left: 50%; 
    margin-left: -30%; 
    border: 1px dotted #333; 
    padding: 20px; 
} 
.box1 { 
    position: relative; 
    float: left; 
    width: 100px; 
    height: 150px; 
    background: #666; 
    margin: 0 15px 15px 0; 
} 
.box2 { 
    position: relative; 
    float: left; 
    width: 100px; 
    height: 200px; 
    background: #666; 
    margin: 0 15px 15px 0; 
} 
.box3 { 
    position: relative; 
    float: left; 
    width: 100px; 
    height: 100px; 
    background: #666; 
    margin: 0 15px 15px 0; 
} 

HTML

<div id="container"> 

    <div class="box1"></div> 
    <div class="box3"></div> 
    <div class="box1"></div> 
    <div class="box2"></div> 
    <div class="box3"></div> 
    <div class="box2"></div> 
    <div class="box3"></div> 
    <div class="box2"></div> 
    <div class="box1"></div> 
    <div class="box1"></div> 
    <div class="box3"></div> 
    <div class="box2"></div> 

</div> 

Answer 1

你不能用纯CSS实现这一目标。你必须为此使用http://masonry.desandro.com/。

Answer 2

我不完全得到你想要的。当我将该代码放入测试文件时，我在浏览器中看到以下内容：

对我来说，看起来最后两个块看起来好像在同一列中的其他块之下。

一个问题可能是您将容器的宽度指定为屏幕的百分比，并将块的宽度指定为绝对值。

请评论，所以我可以让我的答案更清晰，这是我可以从你的问题中得到的所有信息。

Answer 3

你的意思是这样吗？ http://jsfiddle.net/LtLrx/

CSS：

body { 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
} 
#container { 
    position: absolute; 
    width: 60%; 
    left: 50%; 
    margin-left: -30%; 
    border: 1px dotted #333; 
    padding: 20px; 
} 
.contleft 
{ 
    float: left; 
    margin-right: 15px; 
    width: 30%; 
    position: relative; 
    height: 100%; 
} 
.contmiddle 
{ 
    float: left; 
    margin-right: 15px; 
    width: 30%; 
    position: relative; 
    height: 100%; 
} 
.contright 
{ 
    float: left; 
    width: 30%; 
    position: relative; 
    height: 100%; 
} 
.box1 { 
    position: relative; 
    float: left; 
    width: 100px; 
    height: 150px; 
    background: #666; 
    margin: 0 15px 15px 0; 
} 
.box2 { 
    position: relative; 
    float: left; 
    width: 100px; 
    height: 200px; 
    background: #666; 
    margin: 0 15px 15px 0; 
} 
.box3 { 
    position: relative; 
    float: left; 
    width: 100px; 
    height: 100px; 
    background: #666; 
    margin: 0 15px 15px 0; 
} 

HTML：

<div id="container"> 

    <div class="contleft"> 
     <div class="box1"></div> 
     <div class="box2"></div> 
     <div class="box3"></div> 
     <div class="box1"></div> 
    </div> 
    <div class="contmiddle"> 
     <div class="box2"></div> 
     <div class="box1"></div> 
     <div class="box1"></div> 
     <div class="box2"></div> 
    </div> 
    <div class="contright"> 
     <div class="box3"></div> 
     <div class="box1"></div> 
     <div class="box2"></div> 
     <div class="box1"></div> 
    </div> 
</div>