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

Question

I have produced a dynamically generated bar chart. Each bars of the bar chart have different heights. I want to vertically align them all so that they all sit at the bottom of the container div.

This is currently how the chart looks; the baseline seems to be the top of each bar and it grows downwards. I what it to grow upwards like a standard bar chart.

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

So how can I vertically align all the bars so they sit/start at the bottom of the parent div?

Answer 1

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

Answer 2

I think you can try the following method.

[UPDATED]

U need to have a bar wrapper for each of the bar. And set the bar wrappers to have the same height as the main wrapper. Then, set it to have a relative positioning.

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

Set the bars to have absolute position, then position them to be always at the bottom of the bar wrapper.

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

Here's a quick demo I created for this answer. http://jsfiddle.net/6M638/