Question

我正在开发一个网页，并且彼此并排使用两个div，以便它们都显示在一行中。现在，我想将导航栏的第三个div放在这些div的下面，但是它发生在这两个之间。当我将此导航栏不带div放置时，它会出现在页面顶部。如何解决此问题？我是html和CSS的新手。我的代码是：

<body>
  <div style="float: left; margin: 0px; width: 200px">
    First div
  </div>
  <div style="float: right; margin: 0px; width: 200px">
    Second div
  </div>

  <div>Third div</div>
</body>

Answer 1

将此样式添加到第三个div中：

<div style="clear:both">Third div</div>

使用浮动时，始终必须使用清晰的样式来解决显示问题。但是您还有其他选择，例如Css网格，flexbox。

Answer 2

如果要插入下一行，请使用中断标签<br>

Answer 3

只需清除第三格上的浮动

<div style="float: left; margin: 0px; width: 200px">First div</div>
<div style="float: right; margin: 0px; width: 200px">Second div</div>
<div style="clear:both">Third div</div>

最好不要使用内联CSS，并尝试使用flex或grid进行布局

Answer 4

您的问题是，默认情况下，第三个div会将当前“行”上的所有剩余内容都收录下来... 由于您的其他div是float的两面，所以它们之间占据了空间。

避免这种情况的一种简单方法是在第三个clear: both上使用div。

此外，我删除了所有内联样式并改为使用CSS，以及其他一些样式以使摘要更加直观：

div { /* ADDED to make it visual */
  border: 2px solid #ccc; 
  padding: 4px;
}

.w200 { /* Used for common styling for div1 and 2 */
  margin: 0px;
  width: 200px;
}

#div1 {
  float: left;
}

#div2 {
  float: right;
}

#div3 { /* To move the third on a new "line" */
  clear: both;
}

<div id="div1" class="w200">First div</div>
<div id="div2" class="w200" >Second div</div>
<div id="div3">Third div</div>

当然，您可以根据需要更改第三个div的宽度。

希望有帮助。

Answer 5

我想这就是您要寻找的答案

.third-div {
clear: both;}

<body>
  <div style="float: left; margin: 0px; width: 200px">
    First div
  </div>
  <div style="float: right; margin: 0px; width: 200px">
    Second div
  </div>

  <div class="third-div">Third div</div>
</body>

连续两个div之后的第三div

5 个答案: