Question

我似乎总是把这个简单的HTML东西弄错了。我目前正在尝试在我所做的测试页面的页面中间添加并排div：

http://www.comehike.com/hiking_dev.php

我添加的代码是这样的：

<div style="width: 460px; float: left; ">
<strong>Test hello</strong>
</div>
<div style="width: 300px; float: right; ">
<strong>Test hello 2</strong>
</div>

我添加了<strong>个标签，以便您可以更好地在网页上找到它。

但是你看到那里出现的文字是这样的吗？“在考虑任何伤害风险时” - 但该文字在下面的<p>标签中。为什么会出现在那里？

在另一个div中包装我想要对齐的2个div更好吗？

Answer 1

将父级div中的两个div包围，并将溢出设置为隐藏。

<div style="overflow:hidden;">
  <div style="width: 460px; float: left; ">
    <strong>Test hello</strong>
  </div>
  <div style="width: 300px; float: right; ">
    <strong>Test hello 2</strong>
  </div>
</div>

另一种选择（正如其他人指出的那样）是使用第三个元素：

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

关于哪个更好，这是值得商榷的。通常，要么就好了。这是关于该主题的帖子： Floated Child Elements: overflow:hidden or clear:both?

Answer 2

在你的两个浮动div之后，添加另一个空div ...

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

这将导致两个浮动div推送它们下面的所有后续内容。就像你现在一样，在第一个div之后有200个像素的空白区域，允许其他内容简单地环绕它。

增加浮动div的宽度可能不适合您的布局，因此clear:both;是这种情况下最典型的。

Answer 3

您需要像其他人建议的那样使用clear:both;在您的两个div下面添加div，或者您可以将clear:both;添加到以下<p>元素中。

Answer 4

因为您的整个页面宽度为960px。您组合的div宽度为760px（400 + 300）。如果你向第二个div添加200px就可以了。

修改：由于填充，您可以将{div}增加150px并且没问题。

并排添加混淆

4 个答案: