Как сделать колонки одинаковой высоты

127

05 января 2020, 02:30

.compl2 { 
  margin-top: 20px; 
} 
 
.compl-block { 
  font-size: 25px; 
  padding-top: 20px; 
  text-align: center; 
  padding-bottom: 20px; 
  color: #e10886; 
  text-transform: capitalize; 
  font-weight: bold; 
  border: 1px solid #e10886; 
} 
 
.compl__title2 { 
  font-size: 35px; 
  white-space: nowrap; 
  margin-bottom: 0; 
} 
 
.compl2__text { 
  padding-top: 0; 
  border-top: none; 
  font-weight: normal; 
  padding-top: 50px; 
  padding-bottom: 50px; 
  font-weight: 600; 
  font-size: 20px; 
  text-align: center; 
  line-height: 25px; 
  text-transform: none; 
  margin-bottom: 0; 
} 
 
.compl2__text span { 
  text-transform: capitalize; 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
<section class="compl2"> 
  <div class="container"> 
    <div class="row no-gutters a"> 
      <div class="col-lg-3"> 
        <h2 class="compl__title2 compl-block"> 
          комплекс 1 
        </h2> 
        <p class="compl-block compl2__text"> 
          <span>ноги</span> полностью, <br> глубокое бикини, <br> ягодицы, пальцы ног 
        </p> 
        <p class="compl-block compl2__text compl2__text2"> 
          4500 
        </p> 
      </div> 
      <div class="col-lg-3"> 
        <h2 class="compl__title2 compl-block"> 
          комплекс 2 
        </h2> 
        <p class="compl-block compl2__text"> 
          <span>ноги</span> полностью, <br> глубокое бикини, <br> подмышечные <br>впадины, пальцы ног 
        </p> 
        <p class="compl-block compl2__text compl2__text2"> 
          4000 
        </p> 
      </div> 
      <div class="col-lg-3"> 
        <h2 class="compl__title2 compl-block"> 
          комплекс 1 
        </h2> 
        <p class="compl-block compl2__text"> 
          <span>глубокое</span> бикини, <br> подмышечные 
          <br> впадины голени, с, коленом 
        </p> 
        <p class="compl-block compl2__text compl2__text2"> 
          3000 
        </p> 
      </div> 
      <div class="col-lg-3"> 
        <h2 class="compl__title2 compl-block"> 
          комплекс 1 
        </h2> 
        <p class="compl-block compl2__text"> 
          <span>глубокое</span> бикини, <br> подмышечные впадины 
        </p> 
        <p class="compl-block compl2__text compl2__text2"> 
          2100 
        </p> 
      </div> 
    </div> 
  </div> 
</section>

Использую бустрапп на десктопе колонки разной длины как сделать чтобы независимо от текста они были одинаковой высоты Написал же на ДЕСКТОПЕ колонки разной ВЫСОТЫ Почему ставите дизлайки ?

Answer 1

С помощью jQuery, например (выравниваем центральные блоки):

пояснение: чисто для примера дивы col-lg-3 переделал на col-sm-3 дабы в примере кода видно было как работает.

upd:

Если необходимо приглушить данный функционал на мобильных устройствах, оберните код проверкой ширины вьюпорта (например для устройства с разрешением <= 480px)

if ($(window).width() > 481) {

  var $flexitCollection = $('.flexit'), 
  maxHeight = 0; 
  $flexitCollection.each(function(i, el) { 
    maxHeight = (maxHeight < $(el).outerHeight()) ? $(el).outerHeight() : maxHeight; 
  }); 
  $flexitCollection.outerHeight(maxHeight);

.compl2 { 
  margin-top: 20px; } 
 
.compl-block { 
  font-size: 25px; 
  padding-top: 20px; 
  text-align: center; 
  padding-bottom: 20px; 
  color: #e10886; 
  text-transform: capitalize; 
  font-weight: bold; 
  border: 1px solid #e10886; } 
 
.compl__title2 { 
  font-size: 35px; 
  white-space: nowrap; 
  margin-bottom: 0; } 
 
.compl2__text { 
  padding-top: 0; 
  border-top: none; 
  font-weight: normal; 
  padding-top: 50px; 
  padding-bottom: 50px; 
  font-weight: 600; 
  font-size: 20px; 
  text-align: center; 
  line-height: 25px; 
  text-transform: none; 
  margin-bottom: 0; } 
  .compl2__text span { 
    text-transform: capitalize; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
<section class="compl2"> 
<div class="container"> 
<div class="row no-gutters a"> 
<div class="col-sm-3"> 
  <h2 class="compl__title2 compl-block"> 
    комплекс 1 
  </h2> 
  <p class="compl-block compl2__text flexit"> 
    <span>ноги</span> полностью, <br> 
    глубокое бикини, <br> 
    ягодицы, пальцы ног 
  </p> 
  <p class="compl-block compl2__text compl2__text2"> 
    4500 
  </p> 
</div> 
<div class="col-sm-3"> 
  <h2 class="compl__title2 compl-block"> 
    комплекс 2 
  </h2> 
  <p class="compl-block compl2__text flexit"> 
    <span>ноги</span> полностью, <br> 
    глубокое бикини, <br> 
    подмышечные <br>впадины, пальцы ног 
  </p> 
  <p class="compl-block compl2__text compl2__text2"> 
    4000 
  </p> 
</div> 
<div class="col-sm-3"> 
  <h2 class="compl__title2 compl-block"> 
    комплекс 1 
  </h2> 
  <p class="compl-block compl2__text flexit"> 
    <span>глубокое</span> бикини, <br> 
    подмышечные<br>  впадины голени,  
    с, коленом 
  </p> 
  <p class="compl-block compl2__text compl2__text2"> 
    3000 
  </p> 
</div> 
<div class="col-sm-3"> 
  <h2 class="compl__title2 compl-block"> 
    комплекс 1 
  </h2> 
  <p class="compl-block compl2__text flexit"> 
    <span>глубокое</span> бикини, <br> 
    подмышечные 
    впадины 
  </p> 
  <p class="compl-block compl2__text compl2__text2"> 
    2100 
  </p> 
</div> 
</div> 
</div> 
</section>