IE 中的浮动问题，第二个浮动 div 导致“清除”？
我在使用以下（示例）代码时遇到问题。我想要实现的目标如下：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 在这里显示的东西很好。
有关如何解决此问题的任何线索？
干杯， 巴特兹
I'm having problems with the following (example) code. What I'm trying to achieve is the following: div#id1 is a container div. This contains a div with an optional image and a div for body text. Div#id2 is similar. Div#id3 is a container div for the menu. It should be located to the topleft of #container. Now in case there is an image in #id1 the div#id3 will be pushed down. This works in FF, Chrome, etc. It works in IE too but only with div#id1, as soon as I add div#id2 it seems IE uses it to clear the 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>
Try the code above in both FF and IE and you'll see the difference. IE messes up. Then remove div#id2 and it's contents and try again. Here IE shows things just fine.
Any clues as to how to fix this?
Cheers,
Bartezz
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
空白 div 似乎有一个用于包含文本的最小高度，这会导致它被向下推——在 Fx 中，空 div 根本不显示，并且不为其中的内容节省任何空间，因为没有任何。尝试将 #id1 的第二个内部和 div #id2 的宽度修改为较低，您会看到紫色 div 被推高了行高 - 我猜测宽度导致它们彼此如此接近， IE（但不是其他浏览器）不知道如何为其腾出空间，因此将其压低。
不知道这是否符合你的想法，但为什么你不只用一个左 div 和一个右 div，然后将 div 放入其中呢？
The blank div seems to have a minimum height meant for containing text, which causes it to be pushed down -- in Fx empty divs are not shown at all, and don't save any space for content inside them, cause there isn't any. Try modifying the 2nd inside of #id1 and the div #id2's width to lower and you'll see that the purple div gets pushed up a line-height -- I'm guessing the widths cause them to get so close to each other, that IE (but not other browsers) doesn't know how to make room for it so it pushes it down.
Dunno if this fits with your ideas, but why don't you just have one left div, and one right div, and fit divs inside them?