IE問題：Div定位

Question

我希望頁面看起來像這樣：

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

在FF和Chrome的最新版本中，以下內容已正確顯示。 但是在IE中，輸出看起來像這樣：

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

我sn

 <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

嘗試這個：

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

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

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

    }

    #third
    {
        background: Red;
        float: left;

    }
</style>

您必須向左浮動第三個div，然后從第二個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 2

解決的方法很多。 將包裝器寬度設置為1000px。 您也嘗試過float: left; 在第三個？ ..以及類似的教程可能會幫助您： http : //www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/

Answer 3

這樣的事情怎么樣：

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

在這里，這應該工作：

#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 5

我不確定您要測試哪個版本的IE，但這可以在我的IE8中正確顯示。 當我使用開發工具欄切換到IE7標准模式時，出現了問題。 這可以通過此CSS解決：

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

您可能需要在條件注釋中包括此內容，因為我不確定其他瀏覽器的影響。 這是一個例子 。