一个div里面有两个子div,类名都叫card,第二个子div循环生成了5个,一共有6个,当前布局一行三个,如何让每行的第二个div添加左右边距
时间: 2024-04-12 15:31:19 浏览: 67
div左右布局希望能帮上忙
您可以使用CSS的伪类选择器:nth-child(n)来选择每行的第二个div,并为其添加左右边距。以下是一个示例代码:
```html
<div class="container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
<div class="card">Card 5</div>
<div class="card">Card 6</div>
</div>
```
```css
.container {
display: flex;
flex-wrap: wrap;
}
.card {
width: calc(33.33% - 20px); /* 每行三个,减去左右边距的宽度 */
margin: 0 10px; /* 左右边距 */
}
.card:nth-child(3n+2) {
margin-left: 20px; /* 第二个div添加左边距 */
margin-right: 20px; /* 第二个div添加右边距 */
}
```
在上面的示例中,我们使用了flex布局,并通过设置`.container`的`flex-wrap`属性为`wrap`来实现每行三个子元素。然后,我们使用`calc()`函数来动态计算每个子元素的宽度,减去左右边距的宽度。最后,使用:nth-child(n)选择器选择每行的第二个子元素,并为其添加左右边距。
这样,每行的第二个子div就会有左右边距了。您可以根据需要调整边距的数值。
阅读全文