在没有填充的情况下在自定义网格中添加装订线

Question

所以我一直在努力解决这个问题。
标记

<div id="container">
        <div class="grid">
            <div class="col-1-4">
                <div class="module">
                    <h3>1/4</h3>
                </div>
            </div>
            <div class="col-1-2">
                <div class="module">
                    <h3>1/2</h3>
                </div>
            </div>
            <div class="col-1-4">
                <div class="module">
                    <h3>1/4</h3>
            </div>
         </div>
 </div>

CSS

 *{
     box-sizing :  border-box;
 }
 [class *="col"]{
      float : left;
      height : auto;
      overflow: hidden;
 }
 .col-1-2{
      width : 50%;
 }

.col-1-4{
   width : 25%;
 }

#container{
    width : 960px;
    padding : 20px;
    margin : 10px auto 0 auto;
}

.module {
  padding: 20px;
  background: #eee;
  font-family: sans-serif; 
}

这使得列正确并排显示。但是两端相互坍塌，整个事物就像一个大矩形。

现在，我试过去伪装排水沟 编辑[class*="col"]的现有CSS样式并向其添加padding-right : 20px

[class *="col"]{
    float : left;
    height : auto;
    overflow: hidden;
    padding-right : 20px;
}

现在一切都好像是

我设法放入排水沟但是如果仔细观察，三个灰色矩形不会在容器div内居中，它们更多地被推向右边。
如何解决这种情况？如果有人建议更好的方法来添加排水沟，那将非常有用。
谢谢
（图像中的蓝色突出显示了列的实际尺寸）

Answer 1

您可以在块的左右边框添加填充

[class *="col"]{
    float : left;
    height : auto;
    overflow: hidden;
    padding : 0 10px;
}

和

#container{
    padding:10px;
}

Answer 2

请尝试更改CSS，如下所示

[class *="col"]{
    float : left;
    height : auto;
    overflow: hidden;
    padding-left: 20px;
}

将以下内容添加到您的CSS

[class *="col"]:first-child{
     padding-left : 0px;
}