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

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);
}

Answer 2

我认为您可以尝试以下方法。

<强> [增订]

你需要为每个酒吧都有一个酒吧包装。并将条形包装设置为与主包装器具有相同的高度。然后，将其设置为具有相对定位。

.barwrapper{
    height: 500px;
    float: left;
    width: 20px;
    position:relative;
    margin-left: 10px;
}

将条形设置为绝对位置，然后将它们定位在条形包装的底部。

.bar{
    width: 20px;
    position: absolute;
    bottom: 0;
    ...
}

这是我为这个答案创建的快速演示。 http://jsfiddle.net/6M638/