给出具有相同高度的可变内容的inline-block元素？ [英] Giving inline-block elements with variable content the same height?

问题描述

我有4个固定宽度但可变内容的内联块元素，我想所有这些元素具有相同的高度 - 最大的元素。请参阅此jsfiddle 。

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.

我应该如何实现这个？如果它不可能只使用css，什么是正确的方法使用javascript？

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?

推荐答案

使它模块化和可重用的，在mootools，你可以原型的HTML集合：

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/

和您的ul / li： http://jsfiddle.net/kKZXj/8/

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

适用于任何东西，它们甚至不需要彼此靠近

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

这篇关于给出具有相同高度的可变内容的inline-block元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！