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

計算を少し減らす必要があると思います。これらの値を合計すると、101.38889になります;）

于 2013-01-26T23:51:13.150 に答える
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 に答える