如何垂直定位条形图的条形，使它们都位于容器的底部？答案

【问题标题】：How can I position bars of a bar chart vertically so they all sit at the bottom of container?如何垂直定位条形图的条形，使它们都位于容器的底部？
【发布时间】：2014-01-02 01:22:44
【问题描述】：

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

【问题讨论】：

标签： html css height vertical-alignment

【解决方案1】：

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

【讨论】：

【解决方案2】：

我觉得你可以试试下面的方法。

[更新]

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

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

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

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

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

【讨论】：