Question

我知道这是一个老问题，但仍然无法获得任何可行的css解决方案。

盒子应该在高度上增长以容纳所有动态内容。具有最大高度的框应该设置所有其他框的高度，以便所有框都达到相同的高度。

注意：
1）它应该工作到IE-8。并且可能有太多的盒子，因此不要将它限制为2或3盒 2）我尝试了padding-bottom，negative margin bottom和table cell方法。不能使用弹性盒，因为它不支持IE9 3）无法更改HTML结构。

HTML：

<ul>
  <li>
    <div class="tile">
    <div class="img"><img src="http://placehold.it/100x50">
    </div>
    <div class="name">
      Lorum Ipsum Lorum  
    </div>
   </div>
  </li>

  <li>
    <div class="tile">
    <div class="img"><img src="http://placehold.it/100x50">
    </div>
    <div class="name">
      Lorum Ipsum Lorum  Lorum Ipsum Lorum
    </div>
   </div>
  </li>

  <li>
    <div class="tile">
    <div class="img"><img src="http://placehold.it/100x50">
    </div>
    <div class="name">
      Lorum Ipsum Lorum  Lorum Ipsum Lorum
    </div>
   </div>
  </li>

  <li>
    <div class="tile">
    <div class="img"><img src="http://placehold.it/100x50">
    </div>
    <div class="name">
      Lorum Ipsum Lorum  
    </div>
   </div>
  </li>

  <li>
    <div class="tile">
    <div class="img"><img src="http://placehold.it/100x50">
    </div>
    <div class="name">
      Lorum Ipsum Lorum  
    </div>
   </div>
  </li>
</ul>

CSS：

ul{
  margin:0;
  padding:0;
  width:600px; 
  margin:0 auto;
  border:#999 solid 1px;
  border-bottom:none;
  border-right:none;
  overflow:hidden;
}
li{
  float:left;
  list-style:none;
  width:25%;
  padding:0;
  margin:0;
  box-sizing:border-box;
  border-right:#999 solid 1px;
  border-bottom:#999 solid 1px;
  text-align:center;
  padding:5px;
}

示例：http://codepen.io/anon/pen/GFeoc

Answer 1

对于CSS解决方案，请尝试使用float:left选择器上的display:table-cell替换li，并将display:table; table-layout:fixed添加到ul选择器。

Example

Answer 2

这很简单，将它添加到CodePen中的js文件中它将起作用：

$( document ).ready(function() {
    var heights = $("li").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $("li").height(maxHeight);
});

点击此处http://codepen.io/anon/pen/IFmkq

Answer 3

一些简单的JavaScript（jQuery）可以解决问题。

DEMO

equalHeight($('.tile'));

function equalHeight(group) {
  tallest = 0;
  group.each(function() {
    thisHeight = $(this).height();
    if(thisHeight > tallest) {
      tallest = thisHeight;
    }
  });
  group.height(tallest);
}

使用css在多个div上使用相等的列高度

3 个答案: