浮动到右边的DIV出现在中心，而左边的浮动出现在

我有一个宽度为960px的主内容DIV和两个浮动的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似乎＃内容中居中和#sidebar出现向左浮动，但低于#main_data。＃内容没有定义边距或填充，甚至在#sidebar中包含4px填充，浮动的宽度不超过960px。

这在Firefox，IE8，Chrome，Safari和Opera中显得很好 - 但在IE7和IE6中没有。

我应该补充说，如果我在DOM中切换位置，它们看起来是正确的 - 我试图通过将更多相关信息放在#main_data更靠近文档顶部的方式使本网站更易于访问（Wikipedia在左侧边栏稍后在源代码中做同样的事情）。

来源

2010-08-06 mwieczorek

我得到的结果很好...可能不清楚这个问题。 – KoolKabin 2010-08-06 17:28:53

请使用jsfiddle.net进行演示 – 2010-08-06 17:55:13

我“不十分清楚你正在尝试这样做，首先你应该做的是更清晰，但我认为你缺少的是什么明确的元素，如<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 }

来源

2010-08-06 17:21:37 s84

有趣，我精确地复制了你的代码，添加了根html标签和一些Lorem Ipsum文本来代替“... data ...”，并且看到了完全相反的结果：在IE7中预期的行为，但在FF 3.5中不行。对于我来说，解决方案是使用两个子div的边距和填充，直到布局在所有浏览器中看起来都合适，特别是，我将边栏填充降到3px，并明确地将其他两个div的边距设置为0px。但鉴于我的初步结果与您的结果相反，我想这对您而言可能会有所不同。

来源

2010-08-06 17:44:53 cobaltduck

浮动到右边的DIV出现在中心，而左边的浮动出现在

回答

相关问题