html - 并排添加 div 困惑

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> 中下面的标签。为什么会出现在那里？

将我试图对齐的 2 个 div 包装在另一个 div 中是否更好？

Answer 1

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

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

这将导致两个 float div 将所有后续内容推到它们下面。正如您现在看到的那样，第一个 div 之后有 200 像素的空白空间，允许其他内容简单地环绕它。

增加 float div 的宽度可能不适合您的布局，因此 clear:both; 最适合这种情况。