Question

我遇到以下（示例）代码的问题。我想要实现的是：div＃id1是一个容器div。这包含一个带有可选图像的div和一个用于正文的div。 Div＃id2很相似。 Div＃id3是菜单的容器div。它应该位于#container的顶部。现在如果＃id1中有图像，div＃id3将被按下。这适用于FF，Chrome等。它也可以在IE中工作，但只能使用div＃id1，只要我添加div＃id2，IE就会用它来清除div＃id1。

<div id="container" style="background:red;width:800px;min-height:500px;margin:0 auto;">
<div id="id1">
    <div style="width:200px;float:left;"><!-- this div has optional content and therefore might or might not push the purple div down --></div>
    <div style="background:yellow;width:600px;float:right;">This is the top right div</div>
</div>
<div id="id2">
    <div style="background:green;width:600px;float:right;">This is the bottom right div</div>
</div>
<div id="id3">
    <div style="background:purple;width:200px;">This should be the top left div but is not the case in IE</div>
</div>

在FF和IE中尝试上面的代码，你会看到差异。 IE搞砸了。然后删除div＃id2及其内容，然后重试。在这里IE显示的东西很好。

有关如何解决此问题的任何线索？

干杯， Bartezz

Answer 1

空白div似乎有一个用于包含文本的最小高度，这会导致它被按下 - 在Fx中，空的div根本没有显示，并且不为它们内部的内容保存任何空间，因为那里不是。尝试修改＃id1的第二个内部和div＃id2的宽度降低，你会看到紫色的div被推高到一个行高 - 我猜测宽度会导致它们彼此如此接近， IE浏览器（但不是其他浏览器）不知道如何为它腾出空间，因此它将其推倒。

Dunno，如果这符合你的想法，但你为什么不只有一个左div，一个右div，并在他们内部适合div？

在IE中浮动问题，第二次浮动div会导致“清除”？

1 个答案: