Question

我试图让id为4的div出现在带有并排放置的ID 2和3的div之后。但是当我这样做时，id为4的div从顶部开始（不是内容明智的，因为它中的按钮保持在div 2和3中显示的内容之下。但我的边框表明div 4已从顶部开始，内容显示在div 4的底部，从底部开始。

<div id="1" style="width:100%;">
<div id="2" style="float:left; width:50%; border: 5px solid black" ></div>
<div id="3" style="float:right; width:50%; border: 5px solid red"></div>
</div>
<div id="4"style="border: 5px solid cyan"></div>

Answer 1

那是因为你没有清除你的花车。最简单的方法是使用类div添加另一个clear。然后在CSS中定义它

.clear{
  clear:both;
}

结果如下：http://jsfiddle.net/xt0ns1p7/

修改：
此外，您应该考虑使用box-sizing: border box;作为您的div。如果您使用box-sizing: border-box;样式，它将保持您设置的宽度和高度，并且所有边框和边距都将被推入div。

结果如下：http://jsfiddle.net/xt0ns1p7/1/

我想把div放在两个div之下。代码如下

1 个答案: