javascript - 从下到上对齐div

这是一个html条形图。如何使图表中的竖线从下到上显示，而不是现在的显示方式。
这是html

<div class="chart">
    <div style="height: 40px; width: 5px; float: left; padding-bottom: 0px">
        4</div>
    <div style="height: 80px; width: 5px; float: left;">
        8</div>
    <div style="height: 150px; float: left;">
        15</div>
    <div style="height: 160px; float: left;">
        16</div>
    <div style="height: 230px; width: 13px; float: left;">
        23</div>
    <div style="height: 420px; float: left;">
        42</div>
</div>

这里是CSS

 .chart div
    {
        font: 10px sans-serif;
        background-color: steelblue;
        text-align: right;
        padding: 3px;
        margin: 1px;
        color: white;
    }

以下是jsfiddle的链接

最佳答案

您可以使用display: inline-block而不是float，这将允许您使用vertical-align: bottom。
这样地：

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
  display: inline-block;
  vertical-align: bottom;
}

Fiddle

关于javascript - 从下到上对齐div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21084690/