Question

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

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

Answer 2

您可以将height和overflow样式应用于<li>元素

height: 200px;
overflow: auto;

http://jsfiddle.net/kKZXj/1/

使用最大元素作为高度，

可能不是您正在寻找的。

另一种方法是使用<table>元素，每个单元格都会为您提供所需的效果。

http://jsfiddle.net/kKZXj/3/

Answer 3

Ta-dahhhh！

虽然它需要一个Object.each（）循环。有点hacky，但适用于您的目的。

发布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);
});

Answer 4

这是一个纯粹的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/

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

Answer 5

这是一种优雅的jQuery方式：）

http://jsfiddle.net/rifat/yG2xt/

Answer 6

将您的ul设为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 
 }

Answer 7

非常简单的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);

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

7 个答案: