Равные высоты в строке

Question

Я хотел бы установить равные высоты для всех предметов. Я в настоящее время использую этот пример:

var heights = $(".well").map(function() { 
     return $(this).height(); 
    }).get(), 

    maxHeight = Math.max.apply(null, heights); 

    $(".well").height(maxHeight); 

Основываясь на этом вопросе Same height column bootstrap 3 row responsive

Я хотел бы применить это на каждый ряд основе, так как некоторые высоты в настоящее время слишком высока для строк, которые не нуждаются в так быть установленным.

Answer 1

ради примеров Давайте предположим, что вы из положить ваш HTML с помощью цикла PHP (если нет, то вы можете сим петля, хотя элемен ты присваивают класс) тот же принцип применяется.

РНР Пример вывода HTML

<?php foreach($array as $k => $v): ?> 
     <?php if($k % (4) == 0) $class++; ?> 

     <div class="row-num-<?php echo $class ?>"> 
      // div content variable height 
     </div> 
    <?php endforeach; ?> 

JQuery Установка одинаковой высоты для каждой строки, используя существующий код

 var totalFrames = $('div[class*=row-num-]').length; 
     for (var i = 1, l = totalFrames; i < l; i++) { 
      var heights = $(".row-num-"+i).map(function() { 
        return $(this).height(); 
       }).get(), 

       maxHeight = Math.max.apply(null, heights); 

      $(".row-num-"+i).height(maxHeight); 
     } 

Это предполагает вашу строку 4 elems в ширину. Вы можете установить это или динамически рассчитать его в зависимости от вашего использования. В jQuery мы прокручиваем все элементы с классом, например row-num-, тогда мы нацеливаем каждый, задавая высоту. Они будут иметь один и тот же класс каждые четыре элемента. Он продолжается до тех пор, пока не будет достигнут текущий счет этого имени класса.

DEMOhttps://jsfiddle.net/DTcHh/18026/

Answer 2

хорошо его можно с помощью CSS также, если вы используете display:flex на родительский DIV, то все внутренние DIV будет идти с той же высоты в той же строке, но если его потребность в JQuery затем использовать этот

КОД

var maxHeight; 
$(".well").each(function(){ 
    if($(this).height > maxHeight){ 
    maxHeight = $(this).height;// will assign the highest height to this 
    } 
}) 
$('.well').css('height',maxHeight); 

всех ДИВ будут иметь одинаковую высоту в соответствии с высочайшего размером DIV