IE问题:Div定位

时间:2010-12-15 12:55:12

标签: css internet-explorer

我希望我的页面看起来像这样:

+------+------+
|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标记,我将非常感激。

感谢您的时间!

瑞士安德鲁

5 个答案:

答案 0 :(得分: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>

这将为您提供您正在寻找的显示顺序。

答案 1 :(得分:0)

许多解决方法。将包装宽度设置为1000px。你在#third上试过float: left;吗?   ..可能这样的教程会对你有所帮助:http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/

答案 2 :(得分:0)

这样的事情怎么样:

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

答案 3 :(得分:0)

在这里,这应该有效:

#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

答案 4 :(得分:0)

我不确定您正在测试哪个版本的IE,但这在我的IE8中正确呈现。当我使用开发工具栏切换到IE7标准模式时,我遇到了问题。这可以用这个css来解决:

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

您可能需要在条件注释中包含此内容,因为我不确定其他浏览器的效果。以下是an example