css - 将 div 元素对齐并相互对齐

Question

我想对齐 4 个 div 框，使它们处于这样的 2x2 布局中

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

有人可以帮我解决这个问题吗？

Answer 1

给它们全部 float: left，然后将它们包裹在一个容器中，容器的宽度刚好足以容纳其中的 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;
}

---

编辑:如果你想在你已经拥有的那些里面有更多的 div，那么你总是可以对 children 应用同样的技术，比如

<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;
}