Question

我有一个宽度为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（Wikipedia可以同样的事情，左侧边栏在源代码中出现。）

Answer 1

我不太确定你要做什么，所以首先你应该更清楚，但我认为你遗漏的是一个明确的元素，如<br style="clear:both; /'＆gt;

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

Answer 2

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

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

向右浮动的DIV出现在中央，而左浮动出现在下方

2 个答案: