2 个 div 并排，一个浮动 - 如何使另一个 div 紧邻它而不重叠？
我有一段时间遇到以下问题，我真的不知道如何解决它。
目前可以在这里观察到该问题： http://www.androidpolice.com/2009/11/16/the-not-so-good-the-bad-and -the-ugly-my-list-of-20-problems-with-htc-hero/ - 请随意使用它进行 Firebugging。
这里有两个概念：目录 (toc) 和注释。注释通常占据帖子宽度的 100%，一切都很好。
但是，当注释出现在目录旁边时，目录开始重叠并覆盖注释（我在目录上设置了 z-index:1 toc，因为否则注释会覆盖它，这更糟糕）。
有趣的是，注释的文本并未被目录覆盖——只有注释 div 本身被覆盖。
在 IE7 中，情况更糟 - 注释 div 跳到目录下方并留下大量空白（第二张截图）。
那么，我该如何解决这个问题？ 理想的解决方案是让注释 div 占据 100% 的可见空间 - 即，它会在需要时调整自身大小以适合紧邻目录。
以下是一些屏幕截图以供将来参考： 
在 IE7 中： 
I have had the following problem for a while and I am really not sure how to solve it.
The problem can currently be observed here: http://www.androidpolice.com/2009/11/16/the-not-so-good-the-bad-and-the-ugly-my-list-of-20-problems-with-htc-hero/ - feel free to use this for Firebugging.
There are 2 notions here: a table of contents (toc) and notes. A note usually takes 100% of the post width and everything is fine.
However, when a note appears next to a toc, the toc starts overlapping and covering the note (I set z-index:1 on the toc because otherwise the note covered it, which was even worse).
It's interesting to point out that the text of the note doesn't get covered by the toc - only the note div itself does.
In IE7, it's even worse - the note div jumps down to under the toc and leaves a lot of empty space (2nd screenshot).
So, how can I solve this? The ideal solution would have the note div occupy 100% of the visible space - i.e. it would resize itself to fit right next to the toc when needed.
Here are some screenshots for future reference:
In IE7:
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我遇到过同样的问题 。虽然我无法帮助您解决 IE7 特定的问题，但在左列上使用
overflow:hidden可以解决布局重叠问题（并且不会隐藏数据）。具体来说，在您的情况下，您需要：.toc和.note元素上的position:relative代码；.note元素上设置width:auto；.note元素上设置overflow:hidden。请注意，这在 IE6 下不起作用，但是，嗯，这是 IE6。它看起来很难看，但是 现在使用 IE6 的人是被迫的，而且，这并不会使网站无法使用。
Safari 中的结果：
I've had about the same problem. Though I can't help for your IE7-specific issue, using
overflow: hiddenon the left column did the trick for the layout overlapping (and did not hide data). Specifically, in your case, you need to:position:relativecode on the relevant.tocand.noteelements;width:autoon the.noteelements;overflow:hiddenon the.noteelements.Note that this will not work under IE6, but meh, it's IE6. It'll look ugly, but people using IE6 these days are forced to, and besides, it's not making the website unusable.
The result in Safari:
