Question

我想要实现具有交替颜色的网格块的双列网格布局。然而，用一个简单的n-child（奇数）或nth-child（偶数）来实现这个目标并没有成功。

我非常确定我想要的东西可以通过一些n-child欺骗来实现，而不是JS解决方案，但不太确定如何。

这是我想要实现的一笔：http://codepen.io/abbasinho/pen/Gbnze

这里是HTML中的HTML，我想避免添加其他类来添加颜色：

<div class="grid-holder">
  <div class="grid red"></div>
  <div class="grid blue"></div>
  <div class="grid blue"></div>
  <div class="grid red"></div>
  <div class="grid red"></div>
  <div class="grid blue"></div>
  <div class="grid blue"></div>
  <div class="grid red"></div>
</div>

SASS：

.grid-holder {
  width: 50%;
  margin: 0 auto;
  overflow: hidden;
}

.grid {
  width: 50%;
  height: 200px;
  float: left;

    &.red {
      background: red;
    }

    &.blue {
      background: blue;
    }

}

Answer 1

当您每4个元素（红色/蓝色/蓝色/红色）重复一个模式时，您可以通过:nth-child(4n+x)变体实现此目的：

<div class="grid-holder">

  <div class="grid"></div>
  <div class="grid"></div>
  <div class="grid"></div>
  <div class="grid"></div>
  <div class="grid"></div>
  <div class="grid"></div>
  <div class="grid"></div>
  <div class="grid"></div>

</div>

.grid-holder {
    width: 50%;
    margin: 0 auto;
    overflow: hidden;
}

.grid {
    width: 50%;
    height: 200px;
    float: left;
    background: red;

    // The 2nd and the 3rd element in our pattern will be blue
    &:nth-child(4n+2),
    &:nth-child(4n+3) {
        background: blue;
    }  
}

交替的网格颜色

1 个答案: