CSS最小宽度/边距百分比问题答案

【问题标题】：CSS Min width / Margin percentage issueCSS最小宽度/边距百分比问题
【发布时间】：2012-02-15 11:32:07
【问题描述】：

<html>
<head>
<style type="text/css">
body{
    background-color:#000;
    background-image:url(../i/bck.gif);
    font-family:"Helvetica Neue",Arial,sans-serif;
    font-size:12px;
    color:#fff;
    height:100%;
    margin:0;
}
#wrap{
    min-width:1000px;
    width:68%;
    margin:0 16%;
    height:100%;
    background-color:red;
}
</style>
</head>
<body>
<div id="wrap">a</div>
</body>
</html>

编辑：

我现在稍微弄乱了代码，发现问题在于最小宽度。如果你调整浏览器的大小（变小），你会看到它会在左边保持 16% 的边距，而宽度不再是 68%，而是 1000px，在浏览器窗口时可能会超过 68%更小。现在，问题是有人知道解决方法吗？

示例 1：浏览器宽度：2000px，div 宽度：68% -> 1360px，左右边距：16% -> 320px。

示例 2： Browser Width: 1200px, div width: 1000px (min), margin left+right: 16% -> 192p each.

示例 2 就是问题所在。由于 68% 的浏览器小于 1000px，因此 div 的宽度为 1000px。 1000px + 192px + 192px 不等于浏览器的全尺寸 1200px。

【问题讨论】：

你的 html 是什么样的？
我在我的 iPhone 上发布了最初的问题，并意识到我不够彻底。我编辑了原始问题。看看你现在有没有解决办法。

标签： html css

【解决方案1】：

我刚刚测试了这个概念，它似乎按预期工作。

<div>foo</div>

和 CSS：

div { width: 80%; margin: 0 10%; }

您的选择器是一个 id，除非 div 具有 id="div"，否则选择器必须更改。并且属性的大小写很重要。

【讨论】：

我在我的 iPhone 上发布了最初的问题，并意识到我并不彻底。我编辑了原始问题。看看你现在有没有解决办法。

【解决方案2】：

尝试添加：

#wrap {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    min-width: 1000px;
    margin: 0 16%;
}

【讨论】：

我不确定这应该做什么，但在我的情况下它没有任何作用。

【解决方案3】：

问题出在这一行：

margin: 0 16%;

除了指定margin-left和margin-right，你还可以告诉浏览器计算它们：

margin: 0 auto;

这样，如果您的#wrap 宽度为 68%，那么您的边距将为 16%（或 17%，但四舍五入不是您的问题）。如果你的#wrap 是 1000px 宽，那么左右边距仍然是相等的。但他们将低于 16%。

为了完整起见，您的 html 应该以有效的 doctype 声明开头。

【讨论】：

哦，这让我发疯了。边距：0 自动；不适用于位置：绝对。我通过添加另一个包装器并在此后使所有内容都相对，从而取消了绝对位置。此外，这不是实际的 html/css，而只是我放在一起来测试我的页面为什么不起作用的东西。是CSS，页面上的另一个元素还是什么。谢谢。