div中元素数量不确定可能为4个也可能为6个,如何让改div中的元素在有四个元素时让四个元素均匀分为两行两列,有六个元素时均匀分为两行三列
时间: 2023-11-22 08:53:08 浏览: 31
您可以使用CSS的Grid布局来实现这个效果。以下是一个示例代码:
```html
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
```
```css
.container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 初始设置为两列 */
grid-gap: 10px; /* 间距 */
}
.container > .item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
/* 当有6个元素时,将列数改为3 */
.container > .item:nth-child(6n+1) {
grid-column: span 1;
}
.container > .item:nth-child(6n+2) {
grid-column: span 1;
}
.container > .item:nth-child(6n+3) {
grid-column: span 1;
}
.container > .item:nth-child(6n+4) {
grid-column: span 1;
}
.container > .item:nth-child(6n+5) {
grid-column: span 1;
}
.container > .item:nth-child(6n+6) {
grid-column: span 1;
grid-row: 2; /* 将第6个元素移到第二行 */
}
/* 当只有4个元素时,将第四个元素移到第二行 */
.container > .item:nth-child(4) {
grid-column: span 1;
grid-row: 2;
}
```
这里的关键是使用了`grid-template-columns`属性来设置初始的列数为2,然后使用`nth-child`伪类来根据元素的顺序将列数改为3或将某个元素移到第二行。