我有 4 个宽度固定但内容可变的内联块元素，我希望所有这些元素都具有相同的高度 - 即最大元素的高度。请参阅This jsfiddle。
我应该如何做到这一点？如果仅使用 css 无法做到这一点，那么使用 javascript 的正确方法是什么？
【问题讨论】：
标签： javascript html css mootools
可能更好地使其模块化和可重用，在 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/
适用于任何事情，他们甚至不需要彼此靠近
【讨论】：
您可以将height 和overflow 样式应用于<li> 元素
height: 200px;
overflow: auto;
使用最大元素作为高度可能不是您想要的。
另一种方法是使用<table> 元素，每个单元格都会为您提供所需的效果。
【讨论】：
http://shouldiusetablesforlayout.com/。
虽然它需要一个 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);
});
【讨论】：
renderSearchHistory() 的函数（这些元素是在其中制作的）。不过，对于一般情况，我有点担心放入大量布局 js 会使我的网站难以维护
li 元素（就像其他答案一样），因为 ul 无论如何都会扩展到目标高度。跨度>
padding 应用于ul 元素。在这种情况下，您实际上是通过填充量 + 最大 li 来增加所有 li 元素的高度，而不仅仅是最大 li 的高度。
OBJECT.EACH 循环。它是一个htmlcollection.each（想想，一个原型元素数组）。
这是一个纯 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';
}
小提琴：http://jsfiddle.net/kKZXj/7/
这是一个 jQuery 方式：http://jsfiddle.net/kKZXj/5/
您也可以通过为父元素添加边框和背景图像来模拟相同的视觉效果，即使元素的高度不同。
【讨论】：
这是一个优雅的 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
}
【讨论】：
非常简单的 jQuery 插件，它还可以在窗口大小改变时自动调整元素的大小。
将 .my-inline-block-class 更改为 jQuery 选择器，它将选择您的 inline-block 元素。
(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);
【讨论】：