jQuery 高度调整答案

【问题标题】：jQuery Height AdjustmentjQuery 高度调整
【发布时间】：2012-05-14 22:25:27
【问题描述】：

有没有办法说：如果约翰的身高大于迈克的身高，那么让迈克的身高等于约翰的身高？ CSS（虽然我不相信这可以用 CSS 完成）或 jQuery。

查看图片 --> http://i50.tinypic.com/2ecdstw.jpg 了解我的意思。

【问题讨论】：

【解决方案1】：

您可以使用 jQuery 使用 height 样式属性执行类似的操作。

if($(".john").height() > $(".mike").height())
{
    $(".john").height($(".mike").height());
}

更新

Demo of above code

【讨论】：

似乎工作得很好......codepen.io/pen/319/1 你可以删除 javascript，看看它在没有 jquery 代码的情况下是什么样子。
我已经用 jQuery 替换了 $ 并且工作正常！非常感谢瑞恩！

【解决方案2】：

var john = $("#john").css('height'), //use css
    mike = $("#mike").height(); //or just the height() method

if (john>mike) mike=john;

【讨论】：

adeneo 感谢您的回答。问题是约翰的身高并不总是一样的。它的高度取决于包含的文章的长度。
我意识到了，但这就是 jQuery 的 css() 和 height() 函数的用途！
如何在 jQuery 中选择它们？约翰和迈克是容器
也许你应该看一下 jQuery 的文档，那里的文档更好，然后我们可以在这里的一个简单的帖子中解释？

【解决方案3】：

 $.fn.equalHeight = function(){
    var h = 0;
    this.each(function(){
        h = Math.max(h, $(this).height());
    }).height(h);
 };

这个小插件是你需要的吗？

【讨论】：

【解决方案4】：

jsBin demo

$(".elements").height(Math.max.apply(null, $(".elements").map(function () {
    return $(this).height();
}).get()));

这是唯一的 CSS 解决方案：

  .el_wrapper{
    position:relative;
    display:table;
    overflow:hidden;
  }      
  .el{
    position:relative;
    display:inline-block;
    overflow:hidden;
    width:150px;
    float:left;
    background:#eee;
    margin:3px;
    padding:10px;
    margin-bottom:-3000px;
    padding-bottom:3015px;
  }

jsBin demo 2

【讨论】：

非常有用的例子，但高度并不总是相同的。
@ArgGeo 我真的不明白你的评论......我知道！你玩过高地吗？它总是会找到最高的元素并将所有其他元素设置为该高度！你不想要那个？（附注删除/注释掉演示中的 jQuery，你会发现他的身高不一样）
@ArgGeo 我还添加了 CSS 解决方案。看看吧。
问题是这段代码会使每个高度都相等。我只想要 2 列相同的高度！ Ryan 的解决方案在我的情况下是最合适的。非常感谢您的帮助！
但是 Arg Geo...比仅在两列上使用它... :(jsbin.com/inewen/5/edit 我真的不了解您的问题。您只需要单向高度...看起来喜欢。