0

我正在尝试使一排 div 都与最高的高度相匹配，因此它们看起来很统一。

我已经阅读了很多关于此的内容，但似乎找不到任何可以跨浏览器工作的解决方案。

我正在使用的当前脚本是：

    var maxHeight = 1;

    $('.thumbnail').each(function() {
        maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
    });

    $('.thumbnail').each(function() {
        $(this).height(maxHeight);
    });

从逻辑上讲，我不明白为什么这不起作用？

在 Firefox 中运行良好，但似乎在 Chrome 和 Safari 中导致问题。

这是一个供您使用的小提琴：http: //jsfiddle.net/UtMz3/

真正奇怪的是它确实可以在小提琴中使用，但在我的网站上却不行。

更新

所以发生的事情是 Chrome 在图像加载到其中之前抓取了 DIV 高度。因此 Chrome 将 DIV 大小设为 120 像素，然后加载图像，从而将 DIV 大小更改为 290 像素。我无法弄清楚为什么会发生这种情况，似乎在 $(document).ready({}) 包装器中应该可以解决这个问题。我也尝试将 JavaScript 放在页面底部，但结果仍然相同。

非常感谢任何想法或评论，亲切的问候，詹姆斯

4

1 回答 1

1

您将需要检查内容是如何放入这些 div 中的。如果它还没有出现$(document).ready()，那么内容可能是动态添加的，您需要等到它添加到测量之后。

你如何等到内容出现之后取决于它是如何被添加的。

$(document).ready()不等待图像加载。您需要使用$(window).load()它，因此如果内容包含图像，那么您将需要找到一种方法来等待它们加载。 $(window).load()将等待所有图像加载，或者您可以load在尚未加载的每个图像对象上安装事件处理程序，以便在完成加载时收到通知。

于 2013-04-22T23:51:10.753 回答