计算960网格填充的响应％

Question

我正在构建我的第一个基于960网格的响应式网站，而且我遇到了一些我无法解决的问题。

正确到达我的网格中有两列：

.left：总宽度为720px .right：240px总宽度

这两个都包括左右两侧10px的填充，所以在我的固定布局中，我将应用以下完美契合：

.left {
    width: 700px;
    padding: 0 10px;
    float: left;
}
.right {
    width: 220px;
    padding: 0 10px;
    float: right;
}

一切都很好，但现在我正在使用 target / context = result 公式计算此网格，以便它具有响应性。我有一个90％的包含div，这是我的计算：

.left {
    width: 72.916667%;
    padding: 0 1.388889%;
    float: left;
}
.right {
    width: 22.916667%;
    padding: 4.166667%;
    float: right;
}

我认为这些计算是正确的，但我的右栏总是下降到下一行，因为它不合适。

我出错的任何帮助都会很棒！

Answer 1

我认为您需要稍微减少计算量，当我添加这些值时，我得到101.38889;）

Answer 2

我通过反复试验弄明白了。

事实证明我使用列宽作为上下文而不是包含div来错误地计算填充。

对于所有填充，修正后的计算看到10/960 = 1.041667，它现在​​适合。

Answer 3

您的填充计算不正确：10px / 960px = 1.0416667%

基本上，您需要除以总范围，例如（原始）对应的宽度为100％。就你而言，那是960px。