html - 如何垂直放置条形图的条形，使它们都位于容器的底部？

Question

我制作了一个动态生成的条形图。条形图的每个条形都有不同的高度。我想将它们全部垂直对齐，以便它们都位于容器 div 的底部。

这是当前图表的样子；基线似乎是每个条形的顶部并且向下增长。我喜欢像标准条形图一样向上增长。

html:

<div class="chartWrapper">
  <div class="bar" style="height:is-dynamically-generated;"></div>
  <div class="bar" style="height:is-dynamically-generated;"></div>
  <div class="bar" style="height:is-dynamically-generated;"></div>
  etc...
</div>

CSS:

.bar{
    width:5px;
    border: 1px solid #000;
    background-color:grey;
    float:left;
    margin-left:10px;
}
.chartWrapper{
    width:600px;
    height:600px;
    border: 1px solid #000;
}

那么我怎样才能垂直对齐所有的栏，使它们位于/开始于父 div 的底部？

Answer 1

.chartWrapper {
    transform: rotate(180deg);
}