javascript - 网格中最后一个元素的行为

Question

我有一个带有动态生成图像的 Bootstrap 网格。

如果最后一个元素单独出现在行中，则它应该居中。 如果行中有两个元素，则第二个元素应向右浮动。

这就是我想要的:

行中的两个元素:

A   B   D
E   F   G
H       I

行中的一个元素:

A   B   D
E   F   G
    H    

HTML代码:

<div class="row">
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div>
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div>  
</div>

这是我得到的:

行中的两个元素:

A   B   D
E   F   G
H   I

行中的一个元素:

A   B   D
E   F   G
H  

我用 :last-child:nth-child(odd) 和 :last-child:nth-child(even) 试过了，但是在第一行第一个元素是奇数，第二行第一个元素是偶数，第三行第一个元素又是奇数，依此类推。

请注意内容大小会有所不同。

Answer 1

您可以混合使用 nth-child 和 last-child:

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.col-md-6 {
  width: 33.3333%;
  height: 100px;
  border: 1px solid black;
  box-sizing: border-box;
}

.col-md-6:last-child:nth-child(3n+2) {
  /* push second child to right if last child */
  margin-left: auto;
  border-color: red;
}

.col-md-6:last-child:nth-child(3n+1) {
  /* push first child to middle if last child */
  margin: auto;
  border-color: red;
}

<div class="row">
  <div class="col-md-6">
    1
  </div>
  <div class="col-md-6">
    2
  </div>
  <div class="col-md-6">
    3
  </div>
  <div class="col-md-6">
    4
  </div>
  <div class="col-md-6">
    5
  </div>
  <div class="col-md-6">
    6
  </div>
  <div class="col-md-6">
    7
  </div>
  <div class="col-md-6">
    8
  </div>
</div><br>
<div class="row">
  <div class="col-md-6">
    1
  </div>
  <div class="col-md-6">
    2
  </div>
  <div class="col-md-6">
    3
  </div>
  <div class="col-md-6">
    4
  </div>
  <div class="col-md-6">
    5
  </div>
  <div class="col-md-6">
    6
  </div>
  <div class="col-md-6">
    7
  </div>
</div>

如果你需要它来使用 bootstrap 3，而不是 4，那么你可以使用

.col-md-4:last-child:nth-child(3n+2),
.col-md-4:last-child:nth-child(3n+1){
  /* push second child to right if last child */
  margin-left: 33.333333%;
  border: 1px solid red;
}

Example bootply