html - 与 div 的非全高子项垂直对齐

Question

我正在制作一个网站，我有一个条形图的 HTML:

<div class="chart">
  <meter style="height: 160px;">80%</meter>
  <meter style="height: 86px;">43%</meter>
  <meter style="height: 128px;">64%</meter>
  <meter style="height: 172px;">86%</meter>
  <meter style="height: 70px;">35%</meter>
  <meter style="height: 52px;">26%</meter>
</div>

为了将它变成一个漂亮的条形图，我使用了这个 CSS:

div.chart {
  background-color: #343434;
  height: 200px;
  padding: 10px;
}

div.chart meter {
  display: inline-block;
  background-color: #892399;
  border-top: solid 1px #AB34CB;
  color: #FFFFFF;
  outline: solid 1px #670034;
  text-align: center;
  width: 60px;
  vertical-align: text-bottom;
}

因为图表中没有一个条是 100%，因此 200px，图表容器的底部和条之间有一个间隙:

我能想到的解决这个问题的唯一方法是使用 JavaScript，或者在宽度为 1px 和 visibility: hidden; 设置的栏后插入一些很棒的 div，但是这搞砸了我的 HTML。

如何在保持 HTML 不变的情况下以另一种方式解决这个问题？

---

顺便说一下，任何 IE 用户都不会使用此 Web 应用程序，所以我也不关心那古老的 %&@# :)

Answer 1

添加

div.chart {
  display:table-cell;
  vertical-align:bottom;
  }

查看实例:http://jsfiddle.net/Flack/sB2zU/