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

Question

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

Возможные Дубликаты:
CSS-столбцы равной высоты?

у меня есть 3 ДИВС.

такой:

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

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

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

Они будут заполнены текстом. Я не знаю, насколько сильно. Дело в том, что все они должны быть одинаковой высоты.

Как я могу использовать jQuery (или CSS), чтобы найти самый высокий из DIV и установить два других на ту же высоту, создавая 3 равные высоты Див.

это возможно?

358 3

jQuery css

3 ответов:

Comments

Ничего не найдено.

ghayes · Accepted Answer · 2016-02-12 22:37:57

вы не можете легко выбрать по высоте или сравнить в CSS, но jQuery и несколько итераций должны легко решить эту проблему. Мы пройдем через каждый элемент и отследим самый высокий элемент, затем мы снова зациклимся и установим высоту каждого элемента как самую высокую (working JSFiddle):
 $(document).ready(function() {
   var maxHeight = -1;

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

   $('.features').each(function() {
     $(this).height(maxHeight);
   });
 });
[добавление]

Шерифдерек создал 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-без 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)

kleinohad · Accepted Answer · 2015-06-19 17:25:43

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

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

Grigor · Accepted Answer · 2011-07-21 21:51:40

Вы можете сделать три столбца 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>
независимо от ширины одного из ящиков, остальные тоже получат то же самое. Надеюсь, это поможет. Мне жаль, если это не так, я просто сделал код на месте.