Как сделать каждый div одинаковой высоты, чтобы поддерживать работу с 3 div на строку

Question

Мой сайт содержит серию div (представленных зелеными полями), и мне нужно всего лишь 3 строки. Но они не все равны по высоте, поэтому он выталкивает другие divs из выравнивания.

Смотрите здесь:

и вот мой демонстрационный сайт, показывающий полный вопрос, если вы прокрутите вниз: http://testsite24.netai.net/public/demo.html

Вот пример кода для одного из дивы (зеленый коробки):

<div class="block personal fl"> 

       <!-- CONTENT --> 
       <div class="content"> 
        <p class="price"> 
        <p class="vignette" style="background-image:url()"></p> 
        </p> 

       </div> 

       <ul class="features"> 
    <li class="titlebox">59 Acre Paradise</li> 
    <li>Kings County</li> 
    <li>Offered at $95,000</li> 
        </ul> 

</div> 

Можете ли вы предложить решение для сделать все высоты div одинаковой высоты, чтобы они оставались в расстановке? Решение должно работать для IE8 +. Возможно, сценарий для определения самого длинного div в строке и сделать другие два одинаковой высоты?

Раньше я использовал этот скрипт, но FlexWrap не поддерживается IE8/IE9, поэтому мне пришлось отказаться от него. Есть идеи? Спасибо!!

<script> 

;(function($, window, document, undefined) 
{ 
    'use strict'; 

    var s = document.body || document.documentElement, s = s.style; 
    if(s.webkitFlexWrap == '' || s.msFlexWrap == '' || s.flexWrap == '') return true; 

    var $list  = $('.list'), 
     $items  = $list.find('.list__item__inner'), 
     setHeights = function() 
     { 
      $items.css('height', 'auto'); 

      var perRow = Math.floor($list.width()/$items.width()); 
      if(perRow == null || perRow < 2) return true; 

      for(var i = 0, j = $items.length; i < j; i += perRow) 
      { 
       var maxHeight = 0, 
        $row  = $items.slice(i, i + perRow); 

       $row.each(function() 
       { 
        var itemHeight = parseInt($(this).outerHeight()); 
        if (itemHeight > maxHeight) maxHeight = itemHeight; 
       }); 
       $row.css('height', maxHeight); 
      } 
     }; 

    setHeights(); 
    $(window).on('resize', setHeights); 
    $list.find('img').on('load', setHeights); 

})(jQuery, window, document); 

</script> 

Answer 1

Это кажется супер чрезмерным, когда вы можете просто использовать vertical-align:top; по пунктам ... Дайте им мин-высоту, чтобы сделать его немного сильнее.

Answer 2

вы можете использовать max-height, чтобы заставить div (который вызывает проблемы) не получить больше, чем конкретное значение. Для примера установите все 3 divs в max-height: 50px. Они не станут больше и останутся выровненными.

Answer 3

использование

display: table 
display: table-cell 

Код пера: http://codepen.io/anon/pen/mypGBV

Answer 4

Вам не нужно JS для этого. Просто оберните каждую строку divs в div обертки с помощью стиля clear: both. Смотрите эту codepen: http://codepen.io/anon/pen/GgyXNp