Question

我每行有3个div。我想要做的就是在div之间留一个小空间。所以我添加了一个保证金。这会影响每一行的所有第一个div。

结果：

[DIV1] -- [DIV2] -- [DIV3]
-- [DIV4] -- [DIV5] -- [DIV6]

我想得到什么：

[DIV1] -- [DIV2] -- [DIV3]
[DIV4] -- [DIV5] -- [DIV6]

的CSS：

.grids_1{
    text-align:center;
    padding: 2% 0;
}
.grid_1{
    display: block;
    margin-left: 3%;
    float: left;
}
.grid_1.bg1{
    background: #505050;
}
.images_1 {
    width: 30.333%;
    position: relative;
    height:100%;
    margin-bottom: 2%;
}

从数据库中检索div中的所有信息。所以我使用PHP和while循环来显示所有div。

有没有办法在它们之间增加空间而不影响每一行的第一个div？

Answer 1

如果有已知数量的div（在您的示例中为3），您可以删除:nth-child()的每四个孩子的保证金。

.images_1:nth-child(4n) { 
    margin: 0;
}

参考：:nth-child

Answer 2

在你的css中试试这个：

.grid_1:nth-child(3n){ 
       margin-left: 0 !important; 
    }

这将在.grid_1上为元素0,3,6 ...

设置margin-left为0

CSS在多行中间隔多个div

2 个答案: