Javascript 是否为具有可变内容的内联块元素提供相同的高度？

我有4个固定宽度但内容可变的内联块元素，我希望所有这些元素都具有相同的高度，即最大元素的高度。请看

---

我应该如何做到这一点？如果不可能只使用css，那么使用javascript的正确方法是什么？

您可以对

元素应用

高度

和

溢出

样式

height: 200px;
overflow: auto;

---

使用最大元素作为高度时，可能不完全符合您的要求

另一种方法是使用

元素，每个单元格都会提供所需的效果

尽管它需要一个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);
});

---

下面是一个纯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';
}

小提琴：

下面是jQuery的一种方式：

---

您也可以通过向模拟相同视觉效果的父元素添加边框和背景图像来伪造它，即使这些元素的高度不同。

将您的ul id设置为

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 
 }

var ul=document.getElementById（“myUL”）；//拿到保险单
var liNodes=ul.getElementsByTagName（“li”）；//反复浏览李的
var maxHeight=-1；
对于（变量i=0；i

这里有一种优雅的jQuery方式：）

---

最好将其模块化并可重用，在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); 

小提琴

通过您的ul/li：

---

任何东西都可以使用，它们甚至不需要彼此靠近

非常简单的jQuery插件，当窗口大小改变时，它也会自动调整元素的大小

将.my inline block class更改为将选择内联块元素的jQuery选择器

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

---

你会考虑使用jQuery吗？它不可能，因为项目已经使用了MOOTooX，它是一个同样大小的库。两者都运行可能会出现问题。不过，我对任何基于JQuery的解决方案都感兴趣，以防有类似的mootools。你需要IE7支持吗？如果可能的话，我想要IE7支持，但我主要选择IE8。如果有一个解决方案对IE7不起作用，但对该浏览器却能正常降级，我很感兴趣。谢谢你的建议，但是有一个滚动条对我在这里需要的东西是不起作用的。我很想使用表格进行布局，但如果我的朋友看到了，他们会给我提供指向此页面的链接：

http://shouldiusetablesforlayout.com/

@Oliver您可以使用CSS表，这将创建相同的效果，而不需要表元素引入语义问题。很好，谢谢。我想我会那样做的。在这种情况下，它非常适合我，因为我有一个名为

renderSearchHistory（）

（这些元素是在这里生成的）的函数。但是，对于一般情况，我有点担心在我的站点中放置大量的布局js会让维护人员感到困惑。我在查看代码后意识到，迭代所有

li

元素（与其他答案一样）是不必要的，因为

ul

无论如何都会扩展到目标高度。我唯一的问题是，如果对

ul

元素应用

padding

。在这种情况下，实际上是通过填充量+最大

li

来增加所有

li

元素的高度，而不仅仅是最大

li

的高度。这是一个合理的问题。如果是这样的话，也许innerHeight可以工作，尽管跨浏览器兼容性是另一个问题。这是不可伸缩的，您可以测量父元素的高度-它应该与最高的元素相关，而不考虑父元素、父填充或元素的位置或显示属性。此外，这不是一个

对象。每个
循环。这是一个
htmlcollection。每个
（想想，一个元素的原型数组）。非常好！但是这个循环不是每个元素都有匹配的元素吗？只是它看起来不错，但在引擎盖下可能不是很有效。就这些。