Question

你好我已经尝试过做同等高度的js代码，但它不能以某种方式为我工作，

这是我的小提琴：jsfiddle

我想我错过了课程的一些内容？在此先感谢您的任何帮助

这是我的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如果没有，我可以再试一次。

此外，你的小提琴不包括jQuery或下划线，这两者似乎都是必要的。一旦我把它包括在我的插入中，高度是正确的，div不是都正确定位。

Answer 2

添加CSS

.jury-blocks {display：table; } .jury-president__block {display：table-cell;垂直对齐：顶部;}

不需要JS

等高不能正常工作？

2 个答案: