Question

<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％ - ＆gt; 1360px，保证金左+右：16％ - ＆gt;每个320px。

示例2：浏览器宽度：1200px，div宽度：1000px（min），左边距+右边：16％ - ＆gt;每个192p。

示例2是问题。由于68％的浏览器小于1000px，因此div的宽度为1000px。 1000px + 192px + 192px不等于浏览器的完整大小1200px。

Answer 1

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

<div>foo</div>

和CSS：

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

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

Answer 2

尝试添加：

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

Answer 3

问题在于这一行：

margin: 0 16%;

您可以告诉浏览器计算它们，而不是指定margin-left和margin-right：

margin: 0 auto;

这样，如果您的#wrap宽度为68％，那么您的利润率将为16％（或17％，但这里的舍入不是您的问题）。如果#wrap宽度为1000像素，则左右边距仍然相等。但他们将低于16％。

要完成，您的HTML应该以有效的doctype声明开头。

CSS最小宽度/保证金百分比问题

3 个答案: