從下到上對齊div

Question

這是一個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的鏈接

Answer 1

您可以使用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;
}

小提琴