垂直对齐的div

我正在尝试创建一个简单的html/css图形，它必须将大于0的值和小于0的值的条分隔开来。看起来像这样：http://jsfiddle.net/km27Q/3/ 我被困在顶部div的垂直对齐到底部。所以我需要与类酒吧的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; 
}

感谢答案。

来源

2014-04-21 user3529020

请说明您的问题点明智....... –

我编辑的描述，所以我希望这是更容易理解 – user3529020

Verticaly对准对不起 – user3529020

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>

来源

2014-04-21 13:50:50 JohanVdR

是的，我有一个，但它仍然不是我所需要的。我添加了一个图片解释来更好地解释这个问题。 – user3529020

仔细查看你的屏幕，我只能让你想要灰色条形图[1px高度和11px高度]到graph_top容器的底部。第三部分在右侧占据了全部高度？还有一个图表？ – JohanVdR

是的，图形会继续显示类似的灰色条（当然有不同的高度）。有10个空间。 – user3529020

垂直对齐的div

回答

相关问题