Question

我试图让一排div与所有最高的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以120px的比例抓取DIV大小，然后加载图像，从而将DIV大小更改为290px。我无法弄清楚为什么会发生这种情况，似乎在$（document）.ready（{}）包装器中应该解决这个问题。我也尝试将JavaScript放在页面底部，但结果仍然相同。

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

Answer 1

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

你如何等到内容出现后，取决于它的添加方式。

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

Javascript Div最高

1 个答案: