浮動到右邊的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出現在中心，而左邊的浮動出現在

回答

相關問題