css - div的垂直对齐

Question

我正在尝试创建一个简单的 html/css 图，它必须将大于 0 的值和小于 0 的值分开。它看起来像这样:http://jsfiddle.net/km27Q/3/而且我坚持将顶部 div 的垂直对齐居中到底部。所以我需要 bar 类的 div 垂直对齐到 graph_top 类的 div 中的底部有人可以帮我吗？我查找了一些教程，但找不到任何可以使用百分比作为宽度值的内容。

图片说明: http://s21.postimg.org/wnjcvjism/Screenshot_from_2014_04_21_16_26_01.jpg

代码如下:

HTML

<div class="graph">
<div class="graph_top">
    <div class="lol">
<div class="bar" style="height: 1px;"></div><div class="bar" style="height: 11px;"></div>
    </div>
</div>
<div class="horizontal_line"></div>
<div class="graph_bottom">
<div class="bar2" style="height: 1px;"></div><div class="bar2" style="height: 11px;"></div>
</div>

</div>

CSS

.graph {
    width: 95%;

    height: 101px;
    border: 1px solid #aeaeae;
    background-color: #eaeaea;
}
.graph_top
{
    width: 100%;
    height: 50px;
    max-height: 50px;
    position: relative;
}
.graph_bottom
{
    width: 100%;
    height: 50px;
    max-height: 50px;
}
.horizontal_line
{
    width: 100%;
    border-bottom: 1px solid #aeaeae;
    height: 1px;
    padding: 0px;
}
.bar
{
    width: 10%;
    background-color: #aeaeae;
    float: left;
}
.bar2
{
    width: 10%;
    background-color: maroon;
    float: left;
}
.lol
{
    width: 100%;
    position:absolute;
    bottom:0; 
}

感谢您的回答。

Answer 1

http://jsfiddle.net/km27Q/15/

您只需将每个小节向左移动 10%。

.graph_top {
  width: 100%;
  height: 50px;
  max-height: 50px;
  position: relative;
}
.bar{
  position:absolute;
  bottom: 0;
  width: 10%;
  background-color: #aeaeae;
}


    <div class="graph">
        <div class="graph_top">
            <div class="bar" style="height: 1px;left:0;"></div>
            <div class="bar" style="height: 11px;left: 10%;"></div>
            <div class="bar" style="height: 30px;left: 20%;"></div>
            <div class="bar" style="height: 25px;left: 30%;"></div>
            <div class="bar" style="height: 15px;left: 40%;"></div>
            <div class="bar" style="height: 6px;left: 50%;"></div>
        </div>
        <div class="horizontal_line"></div>
        <div class="graph_bottom">
            <div class="bar2" style="height: 1px;"></div>
            <div class="bar2" style="height: 11px;"></div>
        </div>
    </div>