IE問題：事業部定位

Question

我想我的網頁看起來像這樣：

+------+------+ 
|first |third | 
|  |  | 
+------+------+ 
|second|  
|  |  
+------+ 

在FF和Chrome瀏覽器的最新版本剪斷下面的作品，因爲它應該。但在IE瀏覽器的輸出是這樣的：

+------+ 
|first | 
|  |  
+------+------+ 
|second| third|  
|  |  | 
+------+------+ 

我剪斷

<style> 
    #wrapper 
    { 
     width: 680px; 
    } 

    #first 
    { 
     background: Red; 
     float: left; 
     width: 500px; 
    } 

    #second 
    { 
     background: Green; 
     float: left; 
     width: 500px; 
    } 

    #third 
    { 
     background: Red; 
    } 
</style> 
<div id="wrapper"> 
    <!-- 1st two Divs--> 
    <div id="first">Div ONE</div> 
    <div id="second">Div TWO</div> 
    <!-- 3rd Div should be on the top right side next to div one --> 
    <div id="third">Div Three</div> 
</div> 

我真的很感激，如果你能給我一個解決方案不會改變HTML標記。

謝謝你的時間！

瑞士安德魯

Answer 1

這裏，這應該工作：

#wrap { width:800px; position:relative; } 
#first, #second, #third { width:400px; height:400px; } 
#third { position:absolute; top:0; right:0; } 

工作演示：http://vidasp.net/tinydemos/layout.html

Answer 2

許多方法來解決。將包裝寬度設置爲1000px。你還在#third上試過float: left;？ ..和可能這樣的教程將幫助您：http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/

Answer 3

試試這個：

<style> 
    #wrapper 
    { 
     width: 680px; 
    } 

    #first 
    { 
     background: Red; 
     float: left; 
     width: 500px; 
    } 

    #second 
    { 
     background: Green; 
     width: 500px; 

    } 

    #third 
    { 
     background: Red; 
     float: left; 

    } 
</style> 

你不得不浮在第三格左邊，並從第二個div去除浮動。

您將不必編輯HTML，但將不得不重新排序的div：

<div id="wrapper"> 
    <div id="first">Div ONE</div> 
    <div id="third">Div Three</div> 
    <div id="second">Div TWO</div> 
</div> 

這會給你顯示你正在尋找的順序。

Answer 4

怎麼是這樣的：

<style> 
    #wrapper 
    { 
     width: 680px; 
    } 

    #first-second-wrapper { 
     float: left; 
     width: 500px; 
    } 

    #first 
    { 
     background: Red; 
    } 

    #second 
    { 
     background: Green; 
    } 

    #third 
    { 
     background: Red; 
     margin-left: 500px; 
    } 
</style> 
<div id="wrapper"> 
    <!-- 1st two Divs--> 
    <div id="first-second-wrapper"> 
     <div id="first">Div ONE</div> 
     <div id="second">Div TWO</div> 
    </div> 
    <!-- 3rd Div should be on the top right side next to div one --> 
    <div id="third">Div Three</div> 
</div> 

Answer 5

我不知道哪個你的IE版本正在測試，但這在我的IE8中正確渲染。當我使用開發工具欄切換到IE7標準模式時，我遇到了問題。這可以用這個CSS來解決：

#second 
    { 
     background: Green; 
     float: left; 
     width: 500px; 
     clear:both; 
    } 

您可能需要爲我不確定其他瀏覽器上的效果，包括這一個條件註釋。這裏是an example這個。