css - 将 div 放在两个浮动 div 后面

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

我尝试将垂直对齐：底部添加到最后一个 div 没有结果。此外，我尝试添加一个包含两个浮动 div 的 div，然后是第三个 div，但我总是得到相同的结果。我确定这一定是一个非常基本的问题，但我无法在任何地方找到答案......

Answer 1

<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>

Answer 2

below_side 需要一个 float 和一个 clear:both;

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

如果您将 float: left 放在下方，它也会将其从文档流中取出并将其放在与左侧和右侧（相对）相同的空间中，然后添加 clear: both 使其出现在左侧下方和对

Answer 3

添加clear: both到您的below_sidediv。

请参阅此链接。