Используйте jQuery/CSS, чтобы найти самый высокий из всех элементов

Ответ 1

Вы не можете легко выбрать по высоте или сравнить в CSS, но jQuery и несколько итераций должны легко позаботиться об этой проблеме. Мы прокручиваем каждый элемент и отслеживаем самый высокий элемент, затем мы снова зацикливаемся и устанавливаем высоту каждого элемента самого высокого (работаем JSFiddle):

 $(document).ready(function() {
   var maxHeight = -1;

   $('.features').each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.features').each(function() {
     $(this).height(maxHeight);
   });
 });

[Добавление]

Sheriffderek создал JSFiddle для этого решения в гибкой сетке. Спасибо!

[Версия 2]

Вот более чистая версия, использующая функциональное программирование:

$(document).ready(function() {
  // Get an array of all element heights
  var elementHeights = $('.features').map(function() {
    return $(this).height();
  }).get();

  // Math.max takes a variable number of arguments
  // `apply` is equivalent to passing each height as an argument
  var maxHeight = Math.max.apply(null, elementHeights);

  // Set each height to the max height
  $('.features').height(maxHeight);
});

[Версия 3 - sans jQuery]

Здесь обновленная версия, которая не использует jQuery (работает JSFiddle):

var elements = document.getElementsByClassName('features');

var elementHeights = Array.prototype.map.call(elements, function(el)  {
  return el.clientHeight;
});

var maxHeight = Math.max.apply(null, elementHeights);

Array.prototype.forEach.call(elements, function(el) {
  el.style.height = maxHeight + "px";
});

(и вот он в ES6)

Ответ 2

вы можете использовать jquery для каждой функции:

var highest;
var first = 1;
$('.features').each(function() {
   if(first == 1)
   {
        highest = $(this);
        first = 0;
   }
   else
   {
        if(highest.height() < $(this).height())
        {
              highest = $(this);
        }
   }
  });

Ответ 3

Вы можете сделать три столбца div, но вы должны добавить обертку вокруг него, как это

<div id="wrapper">
 <div class="features"></div>
 <div class="features"></div>
 <div class="features"></div>
</div>

в тегах заголовка помещает это

<style type="text/css">
#wrapper {
  position:relative;
  overflow:hidden;
}

.features {
  position:absolute;
  float:left;
  width:200px; /* set to whatever you want */
  height:100%;
}
</style>

какая бы ни была одна из ширины ящиков, другие тоже получат то же самое. Надеюсь это поможет. Прошу прощения, если это не так, я просто сделал код на месте.