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

我有一个动态生成图像的引导网格.

如果最后一个元素在行中是唯一的,那么它应该居中.
如果行中有两个元素,则第二个元素应该向右浮动.

这就是我要的：

行中的两个元素：

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),但是在第一行中第一个元素是奇数,在第二行中第一个元素是偶数,在第三行第一个元素又是奇数,依此类推.

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

解决方法

你可以使用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

原文地址：https://www.jb51.cc/js/150422.html