javascript - 等高不能正常工作？

Question

您好，我已经尝试编写等高 js 代码，但不知何故它对我不起作用，

这是我的 js fiddle :jsfiddle

我想我在类(class)中遗漏了什么？ 在此先感谢您的帮助

这是我的 html:

// equal heights - plugin 
;(function($) {

    $.fn.equalHeights = function() {
        var maxHeight = 0,
            $this = $(this);

        $this.each( function() {
            var height = $(this).innerHeight();
            if ( height > maxHeight ) { maxHeight = height; }
        });

        return $this.css('height', maxHeight);
    };

})(jQuery);

$(document).ready(function(){

    var equaliseMozaic = function(){
        $('.jury-president__block').equalHeights();
        console.log('reset');
    };

    // make mozaic blocks equal heights
	if( $('.jury-president__block').length > 0 ){
        // equalise mozaic blocks
        equaliseMozaic();
        // equalise mozaic blocks on resize
        var throttledequaliseMozaic = _.throttle(equaliseMozaic, 500);
        $(window).resize(throttledequaliseMozaic);
    }
    
});

.jury-blocks{}
.jury-president__block{width:100px; display: inline-block; background-color:gray;}
.jury-president__block img {width:50px;}

 <div class="jury-blocks">
            <div class="jury-president__block grid-20">
                <a href="">
                    <img src="http://placekitten.com/g/300/300" alt="">
                </a>
                <div class="jury-president__category"> Name<br>erwer</div>
                <div class="jury-president__name"> Name, Juror Company</div>
            </div>
            <div class="jury-president__block grid-20">
                <a href="">
                    <!--- <img src="http://placekitten.com/g/300/300" alt=""> --->
                    <img src="http://placekitten.com/g/300/300" alt="">
                </a>
                <div class="jury-president__category"> Name</div>
                <div class="jury-president__name"> Name, Juror Company</div>
            </div>
            <div class="jury-president__block grid-20">
                <a href="">
                    <!--- <img src="/assets/images/female-silhouette.jpg" alt=""> --->
                    <img src="http://placekitten.com/g/300/300" alt="">
                </a>
                <div class="jury-president__category"> Name</div>
                <div class="jury-president__name"> Name,  Company</div>
            </div>

Answer 1

添加这个似乎使它工作: .jury-blocks{display:flex;} 这个笨蛋是否具有您正在寻找的行为？ http://plnkr.co/edit/mPCw3Firht2lbdEMRCpn?p=preview如果没有，我可以再试一次。

此外，您的 fiddle 没有包含 jQuery 或下划线，这两者似乎都是必需的。一旦我将它们包含在我的 plunk 中，高度就正确了，只是 div 的位置不正确。