IE问题：事业部定位

我想我的网页看起来像这样：IE问题：事业部定位

+------+------+ 
|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标记。

谢谢你的时间！

瑞士安德鲁

来源

2010-12-15 Andrew

你有没有试过float：right for the third div？ – Catalin 2010-12-15 12:58:05

是的，但它不会产生正确的输出。 – Andrew 2010-12-15 12:59:54

您使用的是哪个版本的IE？ – Lazarus 2010-12-15 13:00:16

这里，这应该工作：

#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

来源

2010-12-15 13:30:22

这是一个相当不灵活的解决方案。如果第三个容器的内容需要1200px高度怎么办？ – lnrbob 2010-12-15 13:33:21

谢谢！这个解决方案适用于我，因为第三个div永远不会比其他的更高。 – Andrew 2010-12-16 13:42:24

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

来源

2010-12-15 13:01:06 zack

..我也检查了IE盒模型错误/怪癖模式渲染 – zack 2010-12-16 11:11:05

试试这个：

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

这会给你显示你正在寻找的顺序。

来源

2010-12-15 13:05:57 SMSidat

非常感谢您的答案，但正如我所说的，该HTML应该是未触及的。 – Andrew 2010-12-15 13:09:06

我有另一个解决方案，它将保持html不变，但它取决于框的尺寸 - 它们是否被修复？ – SMSidat 2010-12-15 13:23:05

怎么是这样的：

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

来源

2010-12-15 13:09:06 RoToRa

非常感谢，但是没有解决方案让html保持原样吗？ – Andrew 2010-12-15 13:10:40

@Andrew是的，但它取决于盒子的尺寸... – 2010-12-15 13:12:46

我不知道哪个你的IE版本正在测试，但这在我的IE8中正确渲染。当我使用开发工具栏切换到IE7标准模式时，我遇到了问题。这可以用这个CSS来解决：

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

您可能需要为我不确定其他浏览器上的效果，包括这一个条件注释。这里是an example这个。

来源

2010-12-15 13:31:00 lnrbob

IE问题：事业部定位

回答

相关问题