在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的高度都相同

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

Answer 1

使用高度，而不是最小高度。 例如：

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

如果我说对了，那么有几种方法可以满足您的需求。

您可以在这里找到它们： 流体宽度等于高度列

他们解决了这样的问题：

像这样：

你可以在这里看到一个演示

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