css - 将堆叠的 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 会让你的生活更轻松!

这是一个 fiddle :

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

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