垂直對齊的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

回答

相關問題