2个div并排放置，一个漂浮-如何使另一个紧靠其附近而不重叠？

Question

我已经遇到以下问题一段时间了，但我真的不确定如何解决。

目前可以在这里观察到该问题： http : //www.androidpolice.com/2009/11/16/the-not-so-good-the-bad-and-the-ugly-my-list-of-20- -htc -hero /问题 -随时将其用于Firebugging。

这里有2个概念： 目录（toc）和注释 。 笔记通常占用帖子宽度的100％，一切都很好。

但是 ，当注释出现在toc旁边时，该toc开始重叠并覆盖该注释 （我在toc上设置了z-index:1 ，因为否则注释覆盖了它，甚至更糟）。

有意思的是，笔记的文本不会被toc覆盖-只有笔记div本身会被覆盖。

在IE7中，情况甚至更糟-笔记div跳到toc下，并留下了很多空白（第二张屏幕截图）。

那么，我该如何解决呢？ 理想的解决方案是使note div占据可见空间的100％-即，在需要时，它将调整其大小以适合紧靠托托的位置。

以下是一些屏幕截图，供以后参考：

在IE7中：

Answer 1

我也遇到过同样的问题 。 尽管我无法解决您的IE7特定问题，但使用overflow: hidden在左列上可以解决布局重叠的问题（并且没有隐藏数据）。 具体而言，您需要：

1. 删除相关.toc和.note元素上的position:relative代码；
2. 在.note元素上设置width:auto ;
3. 在.note元素上设置overflow:hidden 。

请注意，这在IE6下不起作用，但是，是IE6。 它看起来很难看，但是最近使用IE6的人们被迫使用 ，而且，这并没有使网站无法使用。

---

Safari中的结果：