我似乎无法弄明白,下面是我试图实现的网格布局的图像。
到目前为止,我所知道的是如何使用以下内容定位前两行:
.list {
float: left;
width: 33%;
}
.list:nth-child(-n+2), .list:nth-child(5n+1) {
width: 50%;
}
<div class="list"></div>
一开始还不错,但到了第三行就开始崩溃了。关于如何实现这一点有什么想法吗?
http://www.mythemer.com/wp-content/uploads/2013/12/grid-style.png
最佳答案
.list {
float: left;
width: 50%;
}
.list:nth-child(5n+3), .list:nth-child(5n+4), .list:nth-child(5n) {
width: 33%;
}
关于css - 使用 :nth-child 在网格布局中设置每 3 个元素的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20509339/