Question

我正在将960grid 12col响应式设计转换为HTML。它有一个三个独立的div，每个div宽300px，宽度为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。 Refer this.不知道我哪里出错了。

Answer 1

我认为这是你的保证金权利，这就是问题所在。

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

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

Answer 2

你有3盒宽度为31.25％的宽度，另外还有6.67％的余量，除了最后一个。这相当于总宽度为107.09％，因此无法容纳其容器宽度。

降低数字，使它们总共少于100％。

你也应该通过做20/960计算保证金权。

响应相等的宽度

2 个答案: