IE问题: Div定位

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

试试这个：

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

解决问题的方法很多。将包装宽度设置为1000 to。另外，您已经在第三次尝试了float: left;？..and，可能像这样的教程会帮助您：http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/