Блог

Главная - Вопросы по программированию - У меня проблема с выравниванием границы между разделами 4 и 5

У меня проблема с выравниванием границы между разделами 4 и 5

#html #css

Вопрос:

У меня проблема с выравниванием границы между div 4 и 5. Моя проблема в том, что количество дивов может варьироваться, и если количество таково, что внизу у меня 2 дива, мне нужно выровнять границу между ними.. Есть какие-нибудь идеи или предложения?

 .container {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.row {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: 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: red;
  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
  width: 329px;
} 
 <div class="container">
  <div class="row">
    <div class="card">
      <div class="card_components">1</div>
    </div>
    <div class="card">
      <div class="card_components">2</div>
    </div>
    <div class="card">
      <div class="card_components">3</div>
    </div>
    <div class="card">
      <div class="card_components">4</div>
    </div>
    <div class="card">
      <div class="card_components">5</div>
    </div>
  </div>
</div>

Ответ №1:

ты это серьезно?

 .container{
    max-width: 1140px;
    margin-left:auto;
    margin-right:auto;
}



.row{
  
    display: flex;
    flex: 1 0 100%;
    flex-wrap: 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:red;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    width: 329px;
} 
  <div class="container">
  <div class="row">
    
    
    <div class="card"><div class="card_components">1</div></div>
    <div class="card"><div class="card_components">2</div></div>
    <div class="card"><div class="card_components">3</div></div>
    <div class="card"><div class="card_components">4</div></div>
    <div class="card"><div class="card_components">5</div></div>
  </div>
   </div>

Комментарии:

1. Теперь в вашем примере дивы выровняются по левому краю. Два последних должны быть выровнены посередине

2. добавьте justify-content: center < class="row"> . Я обновил свой код.

3. Была ли ваша проблема решена?

4. Спасибо! Спас мне день!

Ответ №2:

 enter code here

https://codepen.io/sunny-parsana/pen/abwGzYx (выравнивание по центру div 4 и div 5 проблема с границами, чтобы ее решить)

Метки: