响应式 div 的计算不起作用

Question

我有一个 960 像素宽的环绕，然后是一个 930 像素宽的主内容环绕，左右边距为 15 像素。在 main-content wrap 中，有 3 个 div 向左浮动，每个 280px 宽，15px margin-right 来填充 main-content。为了避免给右边的 div 一个边距并使它不适合我给它另一个类并将它的 margin-right 设置为 0。

我正在努力使网站具有响应性，这些是我的百分比计算：
换行=100%
主要内容=96.875%
主要内容边距=1.5625%
divs=30.10752688%
div 边距=1.61290323

CSS：

#page-wrap {
    width:960px; 
    margin: 0 auto; 
    background: white;
}
#main-content {
    width:96.875%;
    margin:15px 1.5625% 0 1.5625%;
}
.box { (the divs)
    float:left;
    width:30.10752688%;
    min-height:160px;
    margin:30px 1.61290323% 0 0;
}
.right{ (only the div to the right)
    margin-right:0;
}

HTML

<div id="page-wrap">
<div id="main-content">  

<div class="box">   
content
</div>

<div class="box">   
content
</div>

<div class="box right"> 
content
</div>

</div>
</div>

我不知道为什么 div 似乎没有正确调整大小。任何帮助将非常感激！ 该网站现在可以在这里查看：http://hl.kylmark.se

Answer 1

我看到的问题是所有蓝色框周围都有一个固定的 10 像素填充。由于填充添加到到元素的宽度，它会抛出你的百分比数学。

解决方案 1

您可以像其他所有内容一样将这些框上的侧边距更改为百分比值：

.blue {
   ...
   padding: 10px 1.0752688%;
}

使用这种方法，您会在变小时折叠边框，这可能是不可取的。

解决方案 2

也许更好的方法是更改​​ box-sizing 属性以计算从边框到边框的宽度，而不是从内容边缘到内容边缘。这样你就可以在一个灵活的容器内有一个 10px 的填充，它的宽度是正确计算的：

.box {
   ...
   width: 32.258065%;
   box-sizing: border-box;
}

还有一件事

您可能还需要注意亚像素舍入。当你的百分比计算到不是一个完整的像素时，浏览器必须决定如何舍入它。如果太多的东西被四舍五入，宽度会变得太大，并在某些浏览器中导致内容跳转。您需要在支持的浏览器中仔细检查。 You can read a good explanation here.