html - 在 div 上设置最小高度，但使所有 div 的高度相同

Question

我正在使用这个 CSS 代码:

<style type="text/css">
html,body {
    font-family:Arial;
}
.container {
    text-align:center;
}
.box {
    width:350px;
    display: inline-block;
    margin:10px 20px 0 auto;
    padding:10px;
    border:1px solid black;
    min-height:60px;
    font-size:60px;
    text-align: center;
}
.box h2 {
    font-size:40px;
    text-align:center;
}
</style>

但我希望所有的div都具有相同的高度

我在这里创建了一个 fiddle :http://jsfiddle.net/UDm3a/

Answer 1

试试这个 jQuery 技巧:

$(function() {
  $.fn.setAllToMaxHeight = function(){
    return this.height(
      Math.max.apply(this, $.map(this, function(e) { return $(e).height() }) )
    )
  }

  $('div.box').setAllToMaxHeight();
  //setTimeout("$('div.box').setAllToMaxHeight();", 10);
});

和 CSS 添加:

.box {
   width:350px;
   display: inline-block;
   margin:10px 20px 0 auto;
   padding:10px;
   border:1px solid black;
   min-height:60px;
   font-size:60px;
   text-align: center;
   vertical-align: top;
}

示例:http://jsfiddle.net/UDm3a/7/