计算 960 网格填充的响应百分比答案

【问题标题】：Calculating responsive % for 960 grid padding计算 960 网格填充的响应百分比
【发布时间】：2013-01-27 07:55:30
【问题描述】：

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

直奔主题，我的网格中有 2 列：

.left: 720px 总宽度 .right: 240px 总宽度

这两者都包括左右 10 像素的填充，所以在我的固定布局中，我将应用以下完美契合的内容：

.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;
}

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

如果我出错了，任何帮助都会很棒！

【问题讨论】：

标签： css responsive-design percentage 960.gs calculated-columns

【解决方案1】：

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

基本上，您需要除以总跨度，例如（最初）对应于 100% 的宽度。在你的情况下，那是960px。

【讨论】：

谢谢马蒂亚斯。我已经想通了，但我接受了你的回答。

【解决方案2】：

我认为您需要稍微减少计算，当我将这些值相加时，我得到 101.38889 ;)

【讨论】：

更高。为 both 左侧和右侧指定了填充，因此您必须计算它们两次。
+1 指出它加起来不等于 100。这迫使我尝试不同的东西。

【解决方案3】：

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

原来我使用列宽作为上下文而不是包含的 div 错误地计算了填充。

修正后的计算结果为所有填充的 10 / 960 = 1.041667，现在它适合了。

【讨论】：

该死，忍者。还好你自己想通了。 :)