布局破碎 - 无法理解为什么

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（用户可以单击并拖动以更改大小）。它们设置了最大宽度，以便用户不能使元素的宽度超过指定的宽度。