两个具有流体含量的div彼此相邻。 IE 7不显示正确的布局

The Case

I have two floating divs next to each other. Both have "fluid" contents and I want them to stay next to each other unless they touch. Then, I want them to be stacked.

我有两个浮动的div彼此相邻。两者都有“流畅”的内容,我希望它们彼此相邻,除非它们触摸。然后,我想让它们堆叠起来。

The problem is that my fluid content (like text or a list) crumbles in IE 7 as soon as the two divs touch. On top of that, this only happens with some IE 7 versions, not all.

问题是,只要两个div触摸,我的流畅内容(如文本或列表)就会在IE 7中崩溃。最重要的是,这只发生在一些IE 7版本中,而不是全部。

The Code

<div class="left-aligned">
    <p>This is some text of undetermined length.</p>
</div>
<div class="right-aligned">
    <p>This is some text of undetermined length as well.</p>
</div>

.left-aligned {
   float: left;
}

.right-aligned {
   float: right;
}

The Test

The Problem

So,apparently, this issue only happens with IE7 and appears to be random. Some people see the wrong layout, some the correct one. Anyone who can shed a light?

所以,显然,这个问题只发生在IE7上并且似乎是随机的。有些人看错布局,有些人看错。任何可以发光的人?

3 个解决方案

#1

Unless I misunderstood, this is easily done by floating the 1st div to the left and 2nd div to the right.

除非我误解,否则可以通过将第一个div向左浮动而第二个div向右浮动来轻松完成。

Here is an example of Case 1.

以下是案例1的示例。

Here is an example of Case 2.

以下是案例2的示例。

I wrapped them in a <div> of fixed width in the example to more easily illustrate the behavior, but without it the same effect would happen just relative to the viewport.

我在示例中将它们包装在固定宽度的

中以更容易地说明行为,但是没有它,相对于视口将发生相同的效果。

#2

Add css:

.left-aligned {
   float: left;
}

.right-aligned {
   float: right;
}

Unless I'm missing something, this should give you exactly the behaviour you are looking for.

除非我遗漏了某些东西,否则这应该可以为您提供您正在寻找的行为。

#3

The CSS2 specifications state "A floated box must have an explicit width". See the float section (9.5) in Visual Formatting Model. If no width is set, the results can be unpredictable.

CSS2规范声明“浮动框必须具有明确的宽度”。请参见Visual Formatting Model中的float部分(9.5)。如果未设置宽度,则结果可能无法预测。

#1