佈局破碎 - 無法理解爲什麼

Question

My page here由於某種原因佈局中斷 - ＃main-content div應該跨頁面延伸到右側導航欄（固定爲348px）。

真的不知道爲什麼，如果有人可以請看看代碼檢查，這將是偉大的..如果你需要CSS & HTML請讓我知道。

非常感謝..

Answer 1

取下content-wrapper的max-width屬性和設置包裝的width 98.6％（佔邊距）

注意，你可能不得不重複了一段你的其他包裝divs /元素，以防你有其他元素短於預期。

我該解決方案使用Chrome測試，它完美的作品 - 正是因爲我相信它的目的是

編輯：

爲什麼最大寬度將不工作進一步解釋：

的max-width和min-width屬性可能被認爲是流體和靜態大小元素之間的中介。沒有指定寬度但具有指定最小寬度的元素將按其默認寬度或最小寬度（兩者中較低者）進行大小設置。同樣，沒有指定寬度但具有指定最大寬度的元素將被設置爲其自動寬度，但只會擴展，因爲它不會超過其最大寬度。

最小寬度和最大寬度也可用於定義的寬度。例如，如果您有一個元素的寬度爲width: 70%;，但您不希望該寬度超過300px，則可以設置max-width: 300px;，元素不會超過300px，但可能小於300px，具體取決於在容器的大小（這是百分比指的是 - 如果寬度設置爲百分比，它將是包含元素的寬度的百分比）。

真實場景 - 這是兩個我所見過的最小和最大寬度的最常見的用途：

• min-width - 情景：您正在創建具有流體佈局的網頁（變調整窗口大小時更寬/更窄）以及您希望始終易讀的內容部分。您可以設置最小寬度，以便在滾動條出現後該部分具有最小大小，並且該部分不再縮小。我在我的新主頁上實現了一個min-width（see it here） - 調整窗口的大小以使其更窄和更窄，並觀察當主要內容[<div id="mainContentBack">]部分的寬度減小到只有600px時發生的情況 - div被設置爲具有min-width: 600px;）。

• max-width - 我描述的，當我解釋這些特性實際上是最常見的，我所看到的情景。然而，第二個最常見的情況是，開發人員選擇在其頁面（有時甚至是整個部分）上創建一個可調整大小的textarea（用戶可以單擊並拖動以更改大小）。它們設置了最大寬度，以便用戶不能使元素的寬度超過指定的寬度。