Giving inline-block elements with variable content the same height?

问题

I have 4 inline-block elements with fixed width but variable content, and I want all of these elements to have the same height - that of the largest element. Please see This jsfiddle.

How should I achieve this? If its not possible to do it using only css, what is the right way to do it using javascript?

回答1:

probably better to make it modular and reusable, in mootools, you can prototype a HTML collection:

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);

fiddle. http://jsfiddle.net/TxtBQ/2/

and with your ul/li: http://jsfiddle.net/kKZXj/8/

works on anything, they don't even need to be close to each other

回答2:

You can apply a height and overflow style to the <li> elements

height: 200px;
overflow: auto;

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

may not be exactly what you're looking for with using the largest element as the height.

Another way to do this would be use a <table> element and each cell would give you the desired effect.

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

回答3:

Ta-dahhhh!

Although it requires an Object.each() loop. Sort of hacky, but works for your purposes.

Relevent 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);
});

回答4:

Here is a pure javascript solution:

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/

And here is a jQuery way: http://jsfiddle.net/kKZXj/5/

You can also fake it, by adding borders and background images to the parent elements that simulates the same visual effect, even if the elements are of different height.

回答5:

Here is an elegant jQuery way :)

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

回答6:

Give your ul an id of myUl and try running the following script. It works on motools. First fetch the max height of the li elements and then set each one's height with the value.

 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 
 }

回答7:

Very simple jQuery plugin which also automatically resizes elements when window size is changed.

Change .my-inline-block-class to a jQuery selector that will select your inline-block elements.

(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);

来源：https://stackoverflow.com/questions/7677956/giving-inline-block-elements-with-variable-content-the-same-height

标签

javascript

html

css

mootools