css - 两个 float 内容相邻的 div。 IE 7 不显示正确的布局

Question

案例

我有两个相邻的 float div。两者都有“流动”的内容，我希望它们彼此相邻，除非它们接触。然后，我希望将它们堆叠起来。

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

---

代码

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

---

测试

1. > Case 1
2. > Case 2

---

问题

因此，显然，这个问题只发生在 IE7 上，而且似乎是随机的。有些人看到错误的布局，有些人看到正确的布局。任何人都可以发出光芒？

Answer 1

除非我误解了，这很容易通过将第一个 div 向左浮动并将第二个 div 向右浮动来完成。

Here is an example of Case 1.

Here is an example of Case 2.

我将它们包裹在 <div> 中在示例中使用固定宽度可以更轻松地说明行为，但如果没有它，同样的效果只会相对于视口(viewport)发生。