html - 多个div与css的列高相等

Question

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

盒子的高度应该增加以容纳所有动态内容。 具有最大高度的框应设置所有其他框的高度，以便所有框都获得相同的高度。

注意:
1) 它应该工作到 IE-8。而且箱子可能太多，所以不要限制在 2 或 3 个箱子。
2) 我尝试了 padding-bottom、negative margin bottom 和 table cell 方法。不能使用 flex box，因为它不支持 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 解决方案，请尝试在 li 选择器上将 float:left 替换为 display:table-cell 并添加 display : table ; table-layout:fixed 到你的 ul 选择器。

Example