Предоставление встроенных блоков с переменным содержимым одинаковой высоты?

Question

У меня есть 4 элемента inline-block с фиксированной шириной, но с переменным содержимым, и я хочу, чтобы все эти элементы имели одинаковую высоту - высоту самого большого элемента.Пожалуйста, смотрите Это jsfiddle .

Как мне этого добиться?Если это невозможно сделать, используя только CSS, как правильно сделать это с помощью JavaScript?

Answer 1

вероятно, лучше сделать его модульным и многоразовым, в mootools вы можете создать прототип HTML-коллекции:

Elements.implement({
    setEqualHeight: function(height) {
        height = height || Math.max.apply(Math, this.map(function(el) { 
            return el.getSize().y 
        }));
        this.setStyle("height", height);
    }
});

// use tallest as height for all
document.getElements("div.equals").setEqualHeight(); 
// or hardwire all to 500...
document.getElements("div.equals").setEqualHeight(500); 

скрипка. http://jsfiddle.net/TxtBQ/2/

и с вашим ul / li: http://jsfiddle.net/kKZXj/8/

работает на что угодно, им даже не нужно быть близко друг к другу

Answer 2

Вы можете применить стиль height и overflow к элементам <li>

height: 200px;
overflow: auto;

http://jsfiddle.net/kKZXj/1/

---

может быть не совсем то, что вы ищете, используя самый большой элемент в качестве высоты.

Еще один способ сделать это - использовать элемент <table>, и каждая клетка даст вам желаемый эффект.

http://jsfiddle.net/kKZXj/3/

Answer 3

Вот элегантный способ jQuery:)

http://jsfiddle.net/rifat/yG2xt/

Answer 4

Вот чистое решение javascript:

var height = 0,
    lis = document.getElementsByTagName('li'),
    i;

for (i=0; lis[i]; i++) {
    height = Math.max( height, lis[i].offsetHeight );
}

for (i=0; lis[i]; i++) {
    lis[i].style.height = height+'px';
}

Fiddle: http://jsfiddle.net/kKZXj/7/

А вот способ jQuery: http://jsfiddle.net/kKZXj/5/

Вы также можете подделатьэто путем добавления границ и фоновых изображений к родительским элементам, которые имитируют один и тот же визуальный эффект, даже если элементы имеют разную высоту.

Answer 5

Ta-dahhhh !

Хотя для этого требуется цикл Object.each (). Вроде хаки, но работает для ваших целей.

Применим JavaScript:

// Calculate the target height of all of the li elements
var targetHeight = document.getElement('ul').getStyle('height');

// Then set their heights to the calculated max
document.getElements('li').each(function(element, key) {
    element.setStyle('height', targetHeight);
});

Answer 6

Дайте вашему ul идентификатор myUl и попробуйте запустить следующий скрипт.Работает на motools.Сначала извлеките максимальную высоту элементов li, а затем установите высоту каждого из них со значением.

 var ul = document.getElementById("myUL"); // get the UL 
 var liNodes = ul.getElementsByTagName("li"); // Iterate through the li's
 var maxHeight = -1; 
 for( var i = 0; i < liNodes.length; i++ ) {
    // get the child nodes of the li  
   var li = liNodes.item(i);  
   if(maxHeight < li.offsetHeight)
         maxHeight = li.offsetHeight; 
 }

 for( var i = 0; i < liNodes.length; i++ ) { // get the child nodes of the li 
   liNodes.item(i).style.height = maxHeight+'px'; //set heights 
 }

Answer 7

Очень простой плагин jQuery, который также автоматически изменяет размеры элементов при изменении размера окна.

Измените .my-inline-block-class на селектор jQuery, который будет выбирать ваши элементы inline-block.

(function($, window) {
    var $ls, $t;
    function autoheight() {
        var max = 0;
        $ls.each(function() {
            $t = $(this);
            $t.css('height','');
            max = Math.max(max, $t.height());
        });
        $ls.height(max);
    }
    $(function() {
        $ls = $('.my-inline-block-class'); // the inline-block selector
        autoheight(); // first time
        $ls.on('load', autoheight); // when images in content finish loading
        $(window).resize(autoheight); // when the window size changes
    });
})(jQuery, window);