Question

我正在尝试使用百分比制作自己的响应式布局。我设法计算了我想要使用的列，但我无法弄清楚如何在列之间放置边缘（装订线）。如果检查代码簿代码，则内容之间没有间隔。

   .container{
    width: 90%;
    max-width: 1140px;
    margin: 0 auto;
    /*background: #333;*/
}


 .container .columns{
    float: left;
    background: #ccc;
    margin: 0 0 1em ;
    padding-right: 1em;
    padding-left: 1em;
    border-left-width:12px;
    }

    .row{
        float: left;
        clear: both;
        width: 100%;
    }

    .container .columns.col-1 { width: 8.33333333333%; }
    .container .columns.col-2 { width: 16.6666666667%; }
    .container .columns.col-3 { width: 25%;   }
    .container .columns.col-4 { width: 33.3333333333%; }
    .container .columns.col-5 { width: 41.6666666667%; }
    .container .columns.col-6 { width: 50%;   }
    .container .columns.col-7 { width: 58.3333333333%; }
    .container .columns.col-8 { width: 66.6666666667%; }
    .container .columns.col-9 { width: 75%;   }
    .container .columns.col-10{ width: 83.3333333333%; }
    .container .columns.col-11{ width: 91.6666666667%; }
    .container .columns.col-12{ width: 100%;  }

Answer 1

我个人会回避Calc，因为它仍然没有完全支持，但取决于你 - http://caniuse.com/#feat=calc

我建议将所有内容包装在另一组元素中，这样您就可以使用填充作为间距和边距进行对齐。看看演示。

<div class="columns col-6"><div>6</div></div>

DEMO

Answer 2

而不是给填充提供余量

.container .columns{
float: left;
background: #ccc;
margin: 0 0 1em ;
margin-right: 1em;
margin-left: 1em;
border-left-width:12px;
}

Answer 3

使用calc()方法从宽度计算边距。例如对于.col-3，CSS将是

.container .columns.col-3 { 
width: calc(25% - 5px);
margin-right:5px;
}

确保以正确的方式使用calc（）

calc([first value][space][operator][space][second value])

Answer 4

如果您看到列宽，则您平均分配了100％的视口宽度。

例如：

.container .columns.col-6 {
   width: 50%;
}

因此，在这种情况下，两个街区之间不会有任何空间。

因此，在提及列的宽度时，您还需要考虑边距。

因此您可以使用以下两种方法之一：

.container .columns.col-6 { 
   width: calc(50% - 10px); // 10px represents the margin / space
   margin-right:10px;
}

或

.container .columns.col-6 { 
   width:  46%;
   margin-right: 1%;
}

第一种方法更好。

响应式布局管理百分比

4 个答案:

DEMO