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，然后将它们包装在一个足够宽的容器中，以适应其中的两个，以便其他两个被推下来。例如，

<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内有更多<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>，那么你总是可以对孩子们应用相同的技术，比如

#container div div {
  float: left;
  height: 150px;
  width: 150px;
}

然后使用CSS，使用以下附加样式：

{{1}}

Answer 2

将 Div 3 的<div style="width:300px;height:300px;clear:left;">替换为<div style="width:300px;height:300px; clear:both; float:left">

完整的HTML

<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:both; float:left">
   DIV 3
</div>

<div style="width:300px;height:300px;float:left;">
   DIV 4
</div>

Answer 3

你可以用这个来实现它：

<body style="width:600px; height:600px;">
<div id="container">
    <div style="width:50%; height:50%;float:left;">
    DIV 1
</div>

    <div style="width:50%; height:50%;float:left;">
    DIV 2
</div>

    <div style="width:50%; height:50%; float:left;">
    DIV 3
</div>
    <div style="width:50%; height:50%;float:left;">
    DIV 4
</div>

</div>
</body>

显然，将样式信息放在CSS文件而不是HTML中。

我会尽量避免设置宽度和宽度。高度到特定大小，除非你根本无法避免它。在不同分辨率的不同浏览器上查看时会导致很多问题。

将div元素在下一个和另一个下方对齐

3 个答案: