在div上设置最小高度，但使所有div的高度相同 [英] set min-height on div but make all divs same height

问题描述

我正在使用以下CSS代码:

I am using this CSS code:

<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具有相同的高度

but i want the divs to all have the same height

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

i have created a fiddle here: http://jsfiddle.net/UDm3a/

推荐答案

尝试以下jQuery技巧:

Try this jQuery trick:

$(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/

这篇关于在div上设置最小高度，但使所有div的高度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！