Question

我正在使用Craft CMS，它通过一个重复的div显示我的所有项目。我需要每两个div为一个宽度，接下来的两个为另一个但是为了排除第一个div。我试过了：

4n，4n-1,4n-2,4n-3＆amp; ：第一子

但这只是迫使第n个孩子在排除第一个孩子后开始。

1 - 70％， 2 - 30％， 3 - 30％， 4 - 70％， 5 - 70％， 6 - 30％， 7 - 30％，等等......

我试图存档的效果显示在附图中。如果有更好的方法，请告诉我。

Answer 1

You're on the right track, but I'd advise using counters like data.frames rather than 4n+1 to keep it simple.

In this example, I had to subtract some space from the widths to account for the margins in between the blocks. I'm sure you can get that working the way you need though.

One thing that's unclear to me is what exactly you're trying to do with the first block. You can use 4n-1 through 4n+2 to exclude the first block from the range, but I don't know in what way you want it to be different really.

4n+5

html, body {
  margin:0;
}

.item {
  display:inline-block;
  background:#ccc;
  padding:2em;
  margin:10px;
  box-sizing: border-box;
}

.item:nth-child(4n+1) {
   width:calc(70% - 24px)
}

.item:nth-child(4n+2), .item:nth-child(4n+3) {
   width:calc(30% - 24px)
}

.item:nth-child(4n+4) {
   width:calc(70% - 24px)
}

Answer 2

我采取了显示：flex方法，基本上使用订单在需要时将项目向左移动，请参阅下面的代码段：

＆＃13;

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.inner-contaner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
}
.inner-contaner .item {
  background-color: steelblue;
  color: white;
  font-weight: bold;
  font-family: monospace;
  padding: 2em;
  margin: 0.5em;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 70%;
          flex: 1 1 70%;
}
.inner-contaner .item:last-child {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 30%;
          flex: 1 1 30%;
  background-color: tomato;
}
.inner-contaner:nth-child(even) .item:last-child {
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
}

＆＃13;

<div class="flex-container">
    <div class="inner-contaner">
        <div class="item">item 1</div>
        <div class="item">item 2</div>
    </div>
    <div class="inner-contaner">
        <div class="item">item 3</div>
        <div class="item">item 4</div>
    </div>
    <div class="inner-contaner">
        <div class="item">item 5</div>
        <div class="item">item 6</div>
    </div>
    <div class="inner-contaner">
        <div class="item">item 7</div>
        <div class="item">item 8</div>
    </div>
    <div class="inner-contaner">
        <div class="item">item 9</div>
        <div class="item">item 10</div>
    </div>
    <div class="inner-contaner">
        <div class="item">item 11</div>
        <div class="item">item 12</div>
    </div>
</div>

＆＃13;

nth-child选择器二乘二除外

2 个答案: