向右浮动的 DIV 出现在中心，而左浮动出现在下方答案

【问题标题】：DIV floated to right appears in center, while left float appears below向右浮动的 DIV 出现在中心，而左浮动出现在下方
【发布时间】：2010-08-07 01:44:53
【问题描述】：

我有一个宽度为 960px 的主要内容 DIV，里面有两个浮动的 DIV 元素。这是它的简化版本：

<div id='content'>
    <div id='main_data'>
       ....Data....
    </div>
    <div id='sidebar'>
       ....data....
    </div>
</div>

还有 CSS：

div#content { width: 960px; position: relative }
div#main_data { float: right; width: 755px; }
div#sidebar { float: left; width: 190px; padding: 4px }

DIV #main_data 似乎在#content 中居中，而#sidebar 向左浮动，但在#main_data 下方。 #content 没有定义边距或内边距，即使包括 #sidebar 中的 4px 内边距，浮动的宽度也不会超过 960px。

这在 Firefox、IE8、Chrome、Safari 和 Opera 中看起来很好 - 但在 IE7 和 IE6 中却不行。

我应该补充一点，如果我在 DOM 中切换位置，它们会正确显示 - 我试图通过将更相关的信息放在靠近文档顶部的 #main_data 中来使这个网站更易于 SEO（维基百科确实如此）左侧边栏在源代码中稍后出现的相同内容）。

【问题讨论】：

我得到了很好的结果...可能不清楚这个问题。
请用jsfiddle.net做一个demo

标签： css css-float

【解决方案1】：

我不太确定你要做什么，所以首先你应该更清楚地说明这一点，但我认为你缺少的是一个明确的元素，例如 <br style="clear:both;/'>

 <div id='content'>
   <div id='main_data'>
      ....Data....
   </div>
   <div id='sidebar'>
      ....data....
   </div>
   <br style='clear:both;'/>
</div>


#content { width: 960px; }
#main_data { float: right; width: 755px; }
#sidebar { float: left; width: 190px; padding: 4px }

【讨论】：

【解决方案2】：

有趣的是，我完全复制了您的代码，添加了根 html 标记和一些 Lorem Ipsum 文本来代替“...data...”，并看到了完全相反的结果：IE7 中的预期行为，但 FF 3.5 中没有.

我的解决方案是调整两个子 div 的边距和内边距，直到布局在所有浏览器中看起来都正确。具体来说，我将侧边栏内边距降低到 3px，并将其他两个 div 的边距显式设置为 0px。但鉴于我的初步结果与你的相反，我想这对你来说也可能不同。

【讨论】：