并排自动定位div
提问于 2012-06-24 23:50:29
我有一些自动生成的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;
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-06-25 00:04:01
假设你的div有一个通用的类名，比如.boxes，添加这个CSS：
.boxes:nth-child(odd) {clear: left;}这将使得每个奇数框都将清除浮动并开始一个新的行。
或者，设置容器的宽度，以便只有两个长方体可以并排放置，然后使用display: inline-block而不是float: left;。
Stack Overflow用户
发布于 2012-06-24 23:55:59
只需将clear: left;添加到div3
编辑：只需使用:nth-child(2n+1)或:nth-of-type(2n+1) css3选择器
Stack Overflow用户
发布于 2012-06-25 00:01:38
添加一个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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11182097
复制相关文章
腾讯云开发者
