0

960grid12colレスポンシブデザインをHTMLに変換しています。それぞれ幅300px、幅20pxのマージン右の3つの別々のdivがあります。これが私のコードです。

HTML

 <section class="container">
        <h1>Services</h1>
        <div class="box">
            box1
        </div>
        <div class="box">
            box2
        </div>
        <div class="box last">
            box3
        </div>
    </section>

CSS

.container{
      max-width: 960px;
      width: 98%;
      margin: 0 auto;
      padding: 0 1.04166666666667%;/*10px / 960px*/
 }
.box{
     width: 31.25%;/*300px / 960px*/
     margin-right: 6.66666666666667%;/*20px / 300px*/
     float: left;
     background: red;
     margin-bottom: 10px;
 }
.last{
   margin-right: 0;
}

そして、私の問題は、クラス名ボックスのあるdivがコンテナのdiv内に収まらないことです。最後のdivは境界線を破り、他の2つのdivの下になります。これを参照してください。どこが間違っているのかわからない。

4

2 に答える 2

2

問題はあなたのマージンライトだと思います。

20を960で割ると0.020833333333333333333333333333333になり、2.0833333333333333333333333333333%になります。

レスポンシブデザインでは、マージンは子要素ではなく親コンテナから計算されます。

于 2013-03-12T10:18:38.697 に答える
1

幅 31.25% のボックスが 3 つあり、最後のボックスを除いて、それぞれに 6.67% のマージンが追加されています。これは合計 107.09% の幅に相当するため、コンテナーの幅に収まりません。

合計が 100% 未満になるように数値を下げます。

また、20/960 を実行して margin-right を計算する必要があります。

于 2013-03-12T10:14:59.097 に答える