将堆叠的div放置在容器的底部

Question

我正在用PHP构建一个放样的条形图。我需要它看起来像这样：

目前我可以叠加灰色和红色值，但它们位于.graph容器的顶部。如何在底部对齐它们？我尝试了vertical-align：bottom但它确实没有用。

<div class="graph">
    <div class="bar">
        <div class="views" style="height:'.$showViews.'px"></div>
        <div class="actions" style="height:'.$showActions.'px"></div>

    </div>
</div>

和CSS

.graph {


  width: 200px;
    height: 32px;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #ccc;
    background-color: #f5f5f5;
}
.graph .bar {
    width: 10px;
    float: left;
    margin: 0 1px;
    height:30
}
.graph .bar .views {
    background-color: #ccc
}
.graph .bar .actions {
    background-color: red
}

Here's my code on JSFIDDLE

感谢。

Answer 1

position:absolute会让您的生活更轻松！

这是一个小提琴：

http://jsfiddle.net/RZ8ye/1/

基本上，我们使用position:absolute将元素堆叠在一起。通过给出父定位（在我们的例子中，“relative”），我们相对于那个定位堆叠元素。我们设置bottom，left和right，然后使用内联样式定义height（基于父级的百分比）

Answer 2

刚刚在CSS中添加了position:relative值。

这是修改后的代码。

.graph .bar .views 
{  
background-color: #ccc; 
height:10px; /*height can be added dynamically*/
position:relative;
}
.graph .bar .actions 
{
background-color: red;
position:relative;
height:20px;
}

HTML与发布的内容相同。

<div class="graph">
    <div class="bar">
            <div class="views" style="height:'.$showViews.'px"></div>
            <div class="actions" style="height:'.$showActions.'px"></div>
        </div>
    <div class="bar">
            <div class="views" style="height:'.$showViews.'px"></div>
            <div class="actions" style="height:'.$showActions.'px"></div>
        </div>
</div>

这是Demo。 http://jsfiddle.net/HHnRQ/1/