Html 在自定义网格中添加水槽，无需填充

所以我一直在与这种情况作斗争
标记

<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>

这会使列正确地并排显示。但是两端互相折叠，整个东西看起来就像一个大长方形。

现在，我试着用 编辑

[class*=“col”]

的现有CSS样式，并向其添加

右键填充：20px

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

现在一切看起来都是这样

我已经设法把水槽放进去了，但是如果你仔细看，三个灰色的长方形不是在容器分区的中心，它们更多的是被推向右边。
如何处理这种情况？如果有人建议一种更好的方法来添加排水沟，那将非常有帮助。

---

谢谢
（图像中的蓝色突出显示表示列的实际大小）

请尝试按以下方式更改CSS

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

将以下内容添加到CSS中

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

---

可以将填充添加到块的左边框和右边框

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

及

---

虽然它将div置于容器内的中心，但会影响其宽度，这是不需要的。我的意思是，两个1/4 div应该有相同的宽度，不是吗？谢谢你的解决方案，但是，这会导致1/4 div中的一个拉伸，另一个挤压，从而导致它们的宽度发生变化到您的类=列并删除第n个子项

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

#container{
    padding:10px;
}