0

Нужно чтоб скрипт присваивал каждой колонке .col его текущую высоту! Сейчас он присваивает высоту первого блока! Подскажите что исправить, спасибо.

var height = $('.col').height();
$('.col').each(function() {
  $(this).css('min-height', height);
});
.row {
  display: flex;
  align-items: flex-start;
}
.col {
  width: 300px;
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col">lorem ipsum lorem</div>
  <div class="col">lorem ipsum lorem ipsum</div>
  <div class="col">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div>
  <div class="col">lorem ipsum lorem ipsum</div>
  <div class="col">lorem ipsum lorem ipsum</div>
  <div class="col">lorem ipsum lorem ipsum</div>
  <div class="col"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div>
  <div class="col"> lorem ipsum</div>  
</div>

1
  • 1
    во-первых, вы устанавливаете минимальную высоту, а во-вторых, вы зачем это делаете? 10 мар 2022 в 16:20

1 ответ 1

0

Исходя из вопроса, должно быть так:

$('.col').each(function() {
  $(this).css('min-height', $(this).height());
});
.row {
  display: flex;
  align-items: flex-start;
}
.col {
  width: 300px;
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col">lorem ipsum lorem</div>
  <div class="col">lorem ipsum lorem ipsum</div>
  <div class="col">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div>
  <div class="col">lorem ipsum lorem ipsum</div>
  <div class="col">lorem ipsum lorem ipsum</div>
  <div class="col">lorem ipsum lorem ipsum</div>
  <div class="col"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div>
  <div class="col"> lorem ipsum</div>  
</div>

Но, что-то мне подсказывает, что Вам нужна высота со значением max-content :

.row {
  display: flex;
  align-items: flex-start;
}
.col {
  height: max-content;
  width: 300px;
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col">lorem ipsum lorem</div>
  <div class="col">lorem ipsum lorem ipsum</div>
  <div class="col">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div>
  <div class="col">lorem ipsum lorem ipsum</div>
  <div class="col">lorem ipsum lorem ipsum</div>
  <div class="col">lorem ipsum lorem ipsum</div>
  <div class="col"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div>
  <div class="col"> lorem ipsum</div>  
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.