在div上设置min-height，但使所有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都具有相同的高度

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

Answer 1

使用高度，而不是最小高度。 e.g：

height: 220px;

Answer 2

要获得相同的偏移和高度，您需要浮动它们并设置高度。

float: left;
height: 300px;

就像我在评论中给你的小提琴一样：http://jsfiddle.net/UDm3a/2/

另一种选择是使用vertical-align: top;和高度，所以：

vertical-align: top;
height: 300px;

在此处查看：http://jsfiddle.net/UDm3a/3/

如果你想动态设置高度，我恐怕你必须使用JavaScript来找到最高点并将其高度应用于其他高度。

Answer 3

您可以通过降低font-size并将min-width和max-width设置为相同来实现此目的。即使设置min-height可能不是必需的，但它对我有效。

CSS
html,body {
font-family:Arial;
}
.container {
text-align:center;
}
.box {
    display: inline-block;
padding:10px;
border:1px solid black;
text-align: center;
    font-size: 100%;
    padding: 10px;
    min-width: 300px;
    max-width: 300px;
}
.box h2 {
font-size:100%;
text-align:center;
}

你可以在这里看到小提琴http://jsfiddle.net/abhishekverma3189/qvtWR/

Answer 4

试试这个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/

Answer 5

如果我找对你，那么有几种方法可以满足你的需要。

你可以在这里找到它们：Fluid Width Equal Height Columns

他们解决了这样的问题：

是这样的：

you can see a D E M O here

您可以从此处下载源文件：DOWNLOAD FILES