我在對準第4和第5部分的邊框時遇到了問題

我有一個問題，就是如何在div 4和div 5之間對齊邊界。 我的問題是，div的數量可以變化，如果數量是這樣的，在底部我有2個div，我需要在它們之間對齊一個邊框。有什么想法或建議嗎？

span class="hljs-selector-class">.container {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.row {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: 包裹。
  margin-right: -15px;
  margin-left: -15px;
}

.card {
  border-radius: 0%;
  border: 0px;
  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: 15px;
  padding-right: 15px;
  float: none;
  width: auto;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
}

@media screen and （min-width: 1200px) {
  .card:nth-child（3n）{
    border-left: 1px solid black
  }
  .card:nth-child（3n -1） {
    border-left: 1px solid black
  }
}

@media screen and （min-width: 992px) and （max-width: 1200px) {
  .card:nth-child（2n） {
    border-left: 1px solid black
  }
}

.card_components {
  background-color: 紅色。
  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
  width: 329px;
}

<div class="container"> /span>
  <div class=" row">
    <div class="card">/span>
      <div class="card_components"/span>> 1</div>
    </div>/span>
    <div class="card"> 
      <div class="card_components"/span>> 2</div>
    </div>/span>
    <div class="card"> 
      <div class="card_components"/span>> 3</div>
    </div>/span>
    <div class="card"> 
      <div class="card_components"/span>> 4</div>
    </div>/span>
    <div class="card"> 
      <div class="card_components"/span>> 5</div>
    </div>/span>
  </div>/span>
</div>/span>

uj5u.com熱心網友回復：

你是認真的嗎？

span class="hljs-selector-class">.container{
    max-width: 1140px;
    margin-left: auto;
    margin-right:auto;
}



.row{
  
    display: flex;
    flex: 1 0 100%。
    flex-wrap: 包裹。
    margin-right: -15px;
    margin-left: -15px;
    justify-content: center;

  
}

.card{
    border-radius: 0%;
    border: 0px;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 15px;
    padding-right: 15px;
    float: none;
    width: auto;
    margin: 0;
    overflow: hidden;
    text-align: center;
}

    @media screen and （min-width: 1200px) {
    .card:nth-child（3n）{
      border-left: 1px solid black
    }
    
    .card:nth-child（3n -1） {
      border-left: 1px solid black
    }
  }


  @media screen and （min-width: 992px) and （max-width: 1200px) {

    .card:nth-child(2n ) {
      border-left: 1px solid black
    }

  }
.card_components {
    background-color:紅色。
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    width: 329px;
}

 <div class="container"> /span>
  <div class=" row">
    
    
    <div class="card">/span>< div class="card_components"/span>> 1</div></div>
    <div class="card"> < div class="card_components"/span>> 2</div></div>
    <div class="card"> < div class="card_components"/span>> 3</div></div>
    <div class="card"> < div class="card_components"/span>> 4</div></div>
    <div class="card"> < div class="card_components"/span>> 5</div></div>
  </div>/span>
   </div>/span>

uj5u.com熱心網友回復：

在此輸入代碼

https://codepen.io/sunny-parsana/pen/abwGzYx (center align div 4 and div 5 border issue slove it)

標籤：

上一篇：紫線/條件性效果圖

下一篇：在collectionview的uiimageview上添加ui標簽