Question

是否可以使用nth-child创建不均匀列的重复模式？这就是我所拥有的，但它只适用于第一行：

.three-cols > div:nth-child(1n) {
   width: 50%;
}
.three-cols > div:nth-child(2n) {
  width: 25%; 
}

.three-cols > div:nth-child(3n) {
  width: 25%; 
}

.three-cols > div:nth-child(3n) {
 margin-right: 0;
 }

所以我希望每一行分开：50％，25％，25％

http://codepen.io/garethj/pen/KNpQYd

Answer 1

试试这个。

＆＃13;

setInterval(() => {
  require('./local-module')()
}), duration)

＆＃13;

.block {  overflow: hidden; }
.block > div {
  box-sizing: border-box;
  float: left;
  border: 3px solid purple;
  width: 25%;
}
.three-cols > div:nth-child(3n+1) { width: 50%; }
.three-cols > div:nth-child(3n+3) { margin-right: 0; }

＆＃13;

希望它会有用。

Answer 2

每行有三个项目，因此您需要为每个选择器使用resolve()。然后根据您要定位的元素将其偏移1,2或3：

＆＃13;

3n

＆＃13;

.three-cols > div:nth-child(3n+1) {
  width: 50%;
}
.three-cols > div:nth-child(3n+2) {
  width: 25%;
}
.three-cols > div:nth-child(3n+3) {
  width: 25%;
}
.three-cols > div:nth-child(3n+3) {
  margin-right: 0;
}
.block {
  overflow: hidden;
}
.block > div {
  box-sizing: border-box;
  float: left;
  border: 3px solid purple;
}

＆＃13;

与nth-child的css网格

2 个答案: