javascript - 为具有可变内容的行内 block 元素提供相同的高度？

Question

我有 4 个固定宽度但内容可变的行内 block 元素，我希望所有这些元素具有相同的高度 - 最大元素的高度。请看This jsfiddle .

我该如何实现？如果仅使用 css 是不可能的，那么使用 javascript 的正确方法是什么？

Answer 1

让它模块化和可重用可能更好，在 mootools 中，您可以制作 HTML 集合的原型(prototype):

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/

什么都可以，他们甚至不需要彼此靠近