即有无限多个元素,按列,每列有两个元素。您是否有任何想法如何使用网格或 flexbox 或任何其他方式(可能通过组合它们)对此进行编码?我知道我可以用表格来做到这一点,但这次我尽量避免使用它们。
最佳答案
nth-child()
在这里可以提供帮助
.box {
display:grid;
grid-auto-flow:column dense; /* column flow with "dense" to fill all the cells */
grid-template-rows:50px 50px; /* 2 rows */
grid-auto-columns:50px;
}
.box span:nth-child(4n + 2) { /* this will do the trick*/
grid-row:1; /* we make 2 in the first row and 3 will be pushed to second row */
}
/* irrelevant styles */
.box {
counter-reset:num;
grid-gap:5px;
}
.box span {
background:yellow;
font-size:25px;
}
.box span::before {
content:counter(num);
counter-increment:num;
}
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
关于css - 使用 css 网格将元素成对放置在两行中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65504567/