Question

我试图创建一个简单的html / css图，它必须为大于0的值和小于0的值分隔条形图。它看起来像这样：http://jsfiddle.net/km27Q/3/ 我一直坚持将顶部div与底部的垂直对齐居中。因此，我需要将类 bar 的div与div的底部垂直对齐，并使用类 graph_top 任何人都可以帮助我吗？我找了几个教程，但我找不到任何与百分比一起工作的宽度值。

图片说明： 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>

垂直对齐div

1 个答案: