css – 将div元素相互对齐

我想对齐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;
}

原文地址：https://www.jb51.cc/css/216557.html