html - 并排自动定位 div

Question

我有一些自动生成的 HTML 代码。

当我float:left;在共享类上添加一个时，它看起来像这样：

+----------------+   +--------------+
|   div 1        |   |   div 2      |
|                |   |              |
|                |   +--------------+
|                |                  
|                |   +--------------+
|                |   |   div 3      |
+----------------+   +--------------+

我想要的是这样的：

+----------------+   +--------------+
|   div 1        |   |   div 2      |
|                |   |              |
|                |   +--------------+
|                |                  
|                |   
|                |   
+----------------+   

+--------------+
|   div 3      |
+--------------+

我怎样才能得到这个结果？

我的 CSS 代码如下所示：

position: relative;
width: 40%;
float: left;
border: 1px solid black;
clear: left;

Answer 1

只需添加clear: left;到 div 3

编辑：只需使用:nth-child(2n+1)or :nth-of-type(2n+1)css3 选择器

Answer 2

假设你的 div 有一个通用的类名，例如.boxes，添加这个 CSS：

.boxes:nth-child(odd) {clear: left;}

这将使每个奇数框都清除浮动并开始新行。

或者，设置容器的宽度，使得只有两个盒子可以并排放置，然后使用display: inline-block代替float: left;.

Answer 3

添加一个 CSS 属性为 clear:both; 的元素 在第二个 DIV 之后，类似于：

<div id="first"></div>
<div id="second"></div>
<br class="clear_both" />
<div id="third"></div>

然后在 CSS 中：

.clear_both {
    clear:both;
    height:0;
    width:0;
}