Question

如果您查看此页面我正在开发：http://dev.aaronpitts.ch/test/您会在行中看到三个绿色按钮，表示＆＃39;了解更多信息＆＃39;。我试图让它们始终使用以下jQuery对齐：

var maxHeight = 0;

$(".same-height-inner").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$(".same-height-inner").height(maxHeight);

.same-height-inner中的p块底部有20px的边距底部，但这并不包含在.same-height-inner的高度中。此外，如果您在1024 x 768的屏幕尺寸上看到这一点，您会看到左侧列的文字在高度上有进一步的错误计算，因为它不包括被破坏为新行的孤立单词。我尝试过使用

outerHeight(true)

但没有区别。我怎样才能实现上述目标？

Answer 1

您只需将.find（＆＃39; p＆＃39;）添加到您的jQuery代码中，即可：

var maxHeight = 0;
$(".same-height-inner").find('p').each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".same-height-inner").height(maxHeight);

如果你使用outerHeight（true）也是这样，例如，我使用这段代码：

function calculateHeight($el) {
   var height = 0;
   $el.children().find('a').each(function() {
      height = height + $(this).outerHeight(true);
    });
   $el.data('oHeight', height);
}

祝你好运。

Answer 2

这是因为段落元素大于封闭div，因为它是块元素中的内联元素，只需在选择器中包含p

$(".same-height-inner p").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$(".same-height-inner").height(maxHeight);

您也可以将封闭的div内联，这也可以解决问题，但可能会在网站的其他地方产生意想不到的后果。

.same-height-inner {
    display: inline-block;
}

如果在换行符上有一个孤立的单词，jQuery不会计算正确的文本高度

2 个答案: