给具有可变内容的内联块元素具有相同的高度？

Question

我有4个具有固定宽度但内容可变的内联块元素,我希望所有这些元素具有相同的高度 - 最大元素的高度.请看这个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/

适用于任何事情,他们甚至不需要彼此接近