0

我正在将 960grid 12col 响应式设计转换为 HTML。它有一个三个独立的 div，每个 div 宽 300px，margin-right 宽 20px。这是我的代码。

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 打破了这条线，并低于其他两个 div。参考这个。不知道我哪里错了。

4

2 回答 2

2

我认为这是您的保证金权利的问题。

它应该是 20 除以 960，即 0.020833333333333333333333333333333 依次变为 2.0833333333333333333333333333333%

在响应式设计中，边距是根据父容器而不是子元素计算的。

于 2013-03-12T10:18:38.697 回答
1

你有 3 个宽度为 31.25% 的盒子，除了最后一个之外，每个盒子都有 6.67% 的边距。这等于总共 107.09% 的宽度，因此不适合它的容器宽度。

降低数字，使它们的总数小于 100%。

此外，您应该通过执行 20/960 来计算边距。

于 2013-03-12T10:14:59.097 回答