Question

我有两个div，一个是float：left，另一个是float：right。它们并排显示，但是当我添加第三个div时，它显示在两个浮动div上，而不是我正在尝试的后面。

<div id="left_side"  style="float:left;" ></div>
<div id="right_side" style="float:right;" ></div>
<div id="below_side" ></div>

我想做什么：http://dl.dropbox.com/u/20836988/intended.png

我实际获得的内容：http://dl.dropbox.com/u/20836988/what%20i%20get.png

我尝试将vertical-align：bottom添加到最后一个没有结果的div。此外，我已经尝试添加一个div包含两个浮点数div然后第三个div但我总是得到相同的结果。我敢肯定这一定是一个非常基本的问题，但我无法在任何地方找到答案......

Answer 1

below_side需要一个浮动和一个清除：两者;

当前左右浮动 - 这将它们从文档流中取出。这意味着下方最终会出现在错误的位置。

如果你将浮动：左侧放在下方，它也将把它从文件流中取出并放在与左右相同的空间中（相对）然后你添加清除：两者都是这样的出现在左下方

Answer 2

将clear: both添加到您的below_side div。

请参阅此link。

Answer 3

<div id="left_side"  style="float:left; background-color:#ccc" >gdfgfdg</div>
<div id="right_side" style="float:right;background-color:red" >gfdgfkjkjhkjhkjh</div>
<div id="below_side" style="background-color:#000; z-index:1000; float:left; color:#FFF;" >dsfdfds</div>

将div放在两个浮动div之后

3 个答案: