css - 计算 960 网格填充的响应百分比

Question

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

说到我的网格中有 2 列:

.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

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

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