Question

我只想将一个div放在另一个下面，而不是在html中使用br或填充第一行。

 div.left {
     float: left;
     width: 200px;
    height:200px;
    background:red;
 }
 
 div.right {
    float:left;
     width: 200px;
     height:200px;
    background:blue;
}

<div class="left">Content</div>
<div class="right">Content</div>

Answer 1

这是默认行为。从规则中删除float: left。

＆＃13;

div.left {
  width: 200px;
  height: 200px;
  background: red;
}

div.right {
  width: 200px;
  height: 200px;
  background: blue;
}

＆＃13;

<div class="left">Content</div>
<div class="right">Content</div>

＆＃13;

Answer 2

在另一个帖子中找到答案。它需要明确：左;在第二个css div。

 div.left {
     float: left;
     width: 200px;
    height:200px;
    background:red;
 }
 
 div.right {
    float:left;
    clear: left;
     width: 200px;
     height:200px;
    background:blue;
}

<div class="left">Content</div>
<div class="right">Content</div>

Answer 3

div是一个所谓的块元素，这意味着默认情况下，它总是占用完整的可用宽度并导致在其下面呈现以下元素。

float: left会覆盖此行为并导致在其旁边呈现以下元素（在float：left的情况下向右）。

因此解决问题的方法是从CSS中删除float:left。

如何将DIV置于彼此之下

3 个答案: