HTML/CSS 网格布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10571294/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS grid layout
提问by Andy
How could I change this grid layout so that the second row of blocks sit just below the corresponding block above it instead of forming a completely new row?
如何更改此网格布局，以便第二行块位于其上方相应块的正下方，而不是形成一个全新的行？
http://jsfiddle.net/AndyMP/wSvrN/
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
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>
回答by sandeep
You can not achieve this with Pure CSS. You have to use http://masonry.desandro.com/for this.
使用纯 CSS 无法实现这一点。为此，您必须使用http://masonry.desandro.com/。
回答by Serge Morel
Do you mean like this ? http://jsfiddle.net/LtLrx/
你的意思是这样吗？ http://jsfiddle.net/LtLrx/
CSS:
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:
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>
回答by Hidde
I don't exactly get what you want. When I put that code into a test file, I get the following in my browser: 
我不完全明白你想要什么。当我将该代码放入测试文件时，我在浏览器中得到以下信息：
To me, it looks like the last two blocks are exactly below the other blocks in that same column.
对我来说，看起来最后两个块正好在同一列中的其他块下方。
A problem may be that you are specifying the width of the container as a percentage of the screen, and the width of the blocks as an absolute value.
一个问题可能是您将容器的宽度指定为屏幕的百分比，将块的宽度指定为绝对值。
Please comment, so I can make my answer clearer, this is all the info I can make from your question.
请发表评论，以便我可以更清楚地回答我的问题，这是我可以从您的问题中获得的所有信息。
