равномерная высота не работает должным образом?

Question

Здравствуйте, я попытался сделать то одинаковую высоту JS код, но его не работает для меня каким-то образом,

это мой JS скрипку: jsfiddle

Я думаю, что им не хватает что-то с классами? Заранее спасибо за любую помощь

это мой HTML:

// equal heights - plugin 
 
;(function($) { 
 

 
    $.fn.equalHeights = function() { 
 
     var maxHeight = 0, 
 
      $this = $(this); 
 

 
     $this.each(function() { 
 
      var height = $(this).innerHeight(); 
 
      if (height > maxHeight) { maxHeight = height; } 
 
     }); 
 

 
     return $this.css('height', maxHeight); 
 
    }; 
 

 
})(jQuery); 
 

 
$(document).ready(function(){ 
 

 
    var equaliseMozaic = function(){ 
 
     $('.jury-president__block').equalHeights(); 
 
     console.log('reset'); 
 
    }; 
 

 
    // make mozaic blocks equal heights 
 
\t if($('.jury-president__block').length > 0){ 
 
     // equalise mozaic blocks 
 
     equaliseMozaic(); 
 
     // equalise mozaic blocks on resize 
 
     var throttledequaliseMozaic = _.throttle(equaliseMozaic, 500); 
 
     $(window).resize(throttledequaliseMozaic); 
 
    } 
 
    
 
});

.jury-blocks{} 
 
.jury-president__block{width:100px; display: inline-block; background-color:gray;} 
 
.jury-president__block img {width:50px;}

<div class="jury-blocks"> 
 
      <div class="jury-president__block grid-20"> 
 
       <a href=""> 
 
        <img src="http://placekitten.com/g/300/300" alt=""> 
 
       </a> 
 
       <div class="jury-president__category"> Name<br>erwer</div> 
 
       <div class="jury-president__name"> Name, Juror Company</div> 
 
      </div> 
 
      <div class="jury-president__block grid-20"> 
 
       <a href=""> 
 
        <!--- <img src="http://placekitten.com/g/300/300" alt=""> ---> 
 
        <img src="http://placekitten.com/g/300/300" alt=""> 
 
       </a> 
 
       <div class="jury-president__category"> Name</div> 
 
       <div class="jury-president__name"> Name, Juror Company</div> 
 
      </div> 
 
      <div class="jury-president__block grid-20"> 
 
       <a href=""> 
 
        <!--- <img src="/assets/images/female-silhouette.jpg" alt=""> ---> 
 
        <img src="http://placekitten.com/g/300/300" alt=""> 
 
       </a> 
 
       <div class="jury-president__category"> Name</div> 
 
       <div class="jury-president__name"> Name, Company</div> 
 
      </div>

Answer 1

Добавление это, кажется, делает его работу: .jury-blocks{display:flex;} шлепнуть ли это иметь поведение, которое вы искали ? http://plnkr.co/edit/mPCw3Firht2lbdEMRCpn?p=preview Если нет, я могу попробовать еще раз.

Кроме того, ваша скрипка не включает jQuery или подчеркивание, оба из которых кажутся необходимыми. Как только я включил тех, кто был в моем плунге, высоты были правильными, divs были не все правильно расположены.

Answer 2

Добавить CSS

.jury-блоки {дисплей: стол; } .jury-president__block {display: table-cell; вертикальные выравнивания: сверху;}

Нет необходимости в JS