1

由于某种原因，我的页面的布局被破坏了 - #main-content div 应该横跨页面延伸到右侧导航（固定为 348 像素）。

真的不知道为什么，如果有人可以看一下代码检查器，那会很棒..如果您需要 CSS 和 html，请告诉我。

非常感谢..

4

1 回答 1

1

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

请注意，您可能必须对其他一些包装的 div/元素重复此操作，以防您有其他元素比预期的短。

我用 Chrome 测试了这个解决方案，它运行良好 - 完全符合我的预期

编辑：

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

max-width和min-width属性可以被认为是流体和静态尺寸元素之间的中介。没有指定宽度但具有指定最小宽度的元素将按其默认宽度或最小宽度（两者中的较低者）调整大小。同样，没有指定宽度但具有指定最大宽度的元素将设置为其自动宽度，但只会在不超过其最大宽度的范围内扩展。

最小和最大宽度也可以与定义的宽度一起使用。例如，如果您有一个元素，您将其宽度设置为，width: 70%;但您不希望该宽度超过 300 像素，您可以设置max-width: 300px;该元素不会超过 300 像素，但它可能小于 300 像素，具体取决于容器的大小（这是百分比所指的 - 即，如果宽度设置为百分比，它将是包含元素宽度的百分比）。

真实场景——这是我见过的最小和最大宽度的两种最常见的用法：

  • min-width- 情况：您正在创建一个具有流畅布局（调整窗口大小时变宽/变窄）和您希望始终清晰易读的内容部分的网页。您可以设置最小宽度，以便在滚动条出现后该部分具有最小尺寸并且该部分将不再缩小。min-width为了这个目的，我在我的新主页上实现了一个（在这里看到它- 调整窗口的大小以使其越来越窄，并观察当主要内容 [ <div id="mainContentBack">] 部分减小到只有 600px 的宽度时会发生什么 - 那个 div设置为有min-width: 600px;）。

  • max-width- 我在解释这些属性时描述的场景实际上是我见过的最常见的场景。然而，第二个最常见的情况是开发人员选择在他们的页面（有时甚至是整个部分）上创建一个可调整大小的文本区域（用户可以单击并拖动以更改大小）。他们设置了最大宽度，以便用户不能使元素比指定的更宽。

于 2012-07-31T13:39:02.543 回答