Question

我的网站显示了一个成员列表。

每个列表项都有照片，标题（会员姓名）和小摘录。

在大屏幕上，列表只有一行。在较小的屏幕上，行会折叠成3列，最后是两列（小于768px）。

我希望每个项目的高度相等，以便每个“行”（在较小的设备上）包含相同数量的项目。

这是一个常见的任务，为此我编写了一个快速函数，在$（window）.load（）和$（window）.resize（）上调用。

我在这项工作中遇到的问题是（我假设）与以下事实有关 - 在设置所有成员项目的高度之前，我首先在每个成员项目中设置元素的高度。这个内部元素是照片，每次调整窗口大小时都会调整大小。（我这样做是因为照片必须显示为圆圈，因此我需要更改每张照片的高度，因为它的宽度会发生变化）。

我无法准确确定问题是什么，但我可以看到每个成员项目上设置的最终高度太短，每个项目内容溢出它的高度。仅在调整窗口大小时会发生这种情况，并且在初始页面加载时可以正常工作。

这是项目（成员）的标记：

<div class="col-xs-6 col-sm-4 col-md-3">
    <div class="member">
        <div class="image">
            <img src="path/to/file.jpg"/>
        </div>
        <div class="bottom">
            <h3>John Smith</h3>
            <p>I like to code.</p>
        </div>
    </div>
</div>

这是函数（在窗口加载和窗口调整大小时调用）：

function resizeMembers(){

    var highestMember = 0;

    $('.member').each(function(i,e){

        $(e).find('.image img').height($(e).find('.image .img').width());

        if($(e).height() > highestMember){
            highestMember = $(e).height();
        }

    });

    $('.member').each(function(i,e){

        $(e).height(highestMember);

    });
}

有谁能告诉我为什么最后一个循环设置得太低 - 每个项目的高度？我猜这与图像的新高度没有被考虑在一起有什么关系？

Answer 1

我解决了这个问题。

这是否构成答案，将取决于您在发现此问题时搜索的原因究竟是什么。

但是，这是我问题中代码的替代方法：

function resizeMembers(){
    var highestMember = 0;

    $('.member').each(function(i,e){

    $(e).find('.image .img').height($(e).find('image .img').width());

    if($(e).find('.bottom').height() > highestMember){
        highestMember = $(e).find('.bottom').height();
    }

});


$('.home-member-x').each(function(i,e){

    the_height = highestMember + $(e).find('.image').width();

    $(e).height(the_height);

});

}

对于找到此页面的人来说，另一个合适的答案是@darrylyeo指出 - 将所有原始图像设为正方形（并将图像的高度设置为自动）。

在重新调整内部元素的大小后，在容器上设置高度

1 个答案: