0

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

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

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

这两个都包括左右 10px 的填充，所以在我的固定布局中，我将应用以下非常适合的内容：

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

一切都很好，但现在我使用目标/上下文=结果公式来计算这个网格，所以它是响应式的。我有一个包含 90% 的 div，这是我的计算：

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

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

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

4

3 回答 3

0

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

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

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

于 2013-01-26T23:55:06.840 回答
0

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

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

于 2013-01-26T23:55:30.280 回答
0

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

于 2013-01-26T23:51:13.150 回答