我想对齐4个div框,使它们像这样的2×2布局
1 2 3 4
我的代码看起来像这样
<div style="width:300px;height:300px;float:left;"> DIV 1 </div> <div style="width:300px;height:300px;float:left;"> DIV 2 </div> <div style="width:300px;height:300px;clear:left;"> DIV 3 </div> <div style="width:300px;height:300px;float:left;"> DIV 4 </div>
其产生以下布局：
1 2 3 4
有人可以帮我弄这个吗？
解决方法
给他们所有的浮动：左,然后将它们包装在足够宽的容器中,以适应其中的2个,以便其他两个被压下.例如,
<div id="container"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> <div>Div 4</div> </div>
CSS：
#container {
width: 600px;
}
#container div {
float: left;
height: 300px;
width: 300px;
}
编辑：如果你想要更多的divs已经拥有,那么你可以随时应用相同的技术给孩子,像
<div id="container">
<div>
<div>Inner Div 1</div>
<div>Inner Div 2</div>
<div>Inner Div 3</div>
<div>Inner Div 4</div>
</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
</div>
然后用CSS,使用这个额外的风格：
#container div div {
float: left;
height: 150px;
width: 150px;
}
