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

时间:2012-07-31 13:24:18

标签: html css

由于某些原因,

My page here的布局被破坏了 - #main-content div应该跨越页面延伸到右侧导航(固定为348px)。

真的不确定为什么,如果有人可以请一位代码检查员看看会很棒......如果你需要CSS& html请告诉我。

非常感谢..

1 个答案:

答案 0 :(得分:1)

max-width中删除content-wrapper属性,并将包装器的width设置为98.6%(占您的边距)

请注意,如果您有其他元素短于预期,则可能必须为其他一些包装的div /元素重复此操作。

我使用Chrome测试了这个解决方案,它运行得非常完美 - 正如我认为的那样

编辑:

进一步解释为什么max-width不起作用:

可以将max-widthmin-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 - 我在解释这些属性时描述的场景实际上是我见过的最常见的场景。然而,第二个最常见的是开发人员选择在其页面(有时甚至是整个部分)上创建可调整大小的文本区域(用户可以单击并拖动以更改大小)。它们设置了最大宽度,以便用户不能使元素比指定的宽。