我有一個寬度爲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在左側邊欄稍後在源代碼中做同樣的事情)。
我得到的結果很好...可能不清楚這個問題。 – KoolKabin 2010-08-06 17:28:53
請使用jsfiddle.net進行演示 – 2010-08-06 17:55:13