垂直对齐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。 / p>

如何在保留HTML的同时以另一种方式修复此问题？

---

顺便说一句，这个网络应用程序不会被任何IE用户使用，所以我不关心那个古老的％＆amp; @＃:(）

Answer 1

添加

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

请参阅实例：http://jsfiddle.net/Flack/sB2zU/

Answer 2

如果div.chart必须始终为200px，则在其中设置另一个没有指定高度的div，并将<meter>放入其中。将此新内部div设置为position:absolute;bottom:0;设置外部 div上的背景颜色，而不是内部颜色。

像：

#outer { position: relative;
    background: purple;
    height: 200px; }
.chart { position: absolute;
    bottom: 0; 
    background: transparent; /* not necessary, just to show you. */
    }


<div id="outer">
<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>
</div>