CSS - 兩個並排divs，一個浮動 - 我如何讓其他人適合在旁邊沒有重疊？

Question

我有一段時間有以下問題，我真的不知道如何解決它。

這個問題目前可以在這裏觀察到：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。

這裏有2個概念：a 目錄（toc）和筆記。一張紙條通常需要100％的郵寄寬度，一切都很好。

然而，當記旁邊會出現TOC的TOC開始重疊和覆蓋的說明（我在TOC設置z-index:1，否則說明覆蓋它，這是更糟糕）。

有趣的是，筆記文本沒有被toc覆蓋 - 只有note div本身。

在IE7中，情況更糟糕 - note div會跳到toc下面並留下很多空的空間（第2張截圖）。

那麼，我該如何解決這個問題呢？理想的解決方案是將音符div佔據可見空間的100％ - 即在需要時它將調整自身的大小以適合緊挨toc的位置。

任何積分表示讚賞。謝謝！

這裏是供將來參考一些截圖：

在IE7

：

Answer 1

我已經about the same problem。雖然我無法幫助您處理IE7特定的問題，但在左欄中使用overflow: hidden卻爲佈局重疊（並且不隱藏數據）訣竅。具體而言，在你的情況，你需要：

1. 對相關.toc和.note元素刪除position:relative代碼;
2. 設置width:auto上的.note元素;
3. 設置overflow:hidden上的.note元素。

請注意，這不會在IE6下工作，但嗯，它是IE6。它看起來很醜，但people using IE6 these days are forced to，而且，它不會使網站無法使用。

---

結果在Safari： http://img291.imageshack.us/img291/3483/capturedcran20100322233.png