垂直CSS/HTML5進度條

Question

我正在尋找一個垂直條，我可以更改像百分比類型的百分比類型的百分比，但是在垂直格式中，我成功地獲得了水平的使用此工作的值：CSS Progress Bar但現在我想模仿，但垂直。

Is there a way that I can do this。

這是豎條代碼：

<div class="score"> 
<div id="test" class="score-completed" style="height:80;"> 
<div>&nbsp;</div> 
</div> 
</div> 

.score { 
width:34px; 
height:141px; 
background: url(/assets/images/accordion/score.png) no-repeat 0 0px; 
} 
.score-completed { 

width:26px; 
margin-left: -1px; 
background: url(/assets/images/accordion/score.png) no-repeat 1px 0; 
} 
.score-completed div { 
float: right; 
height: 50%; 
width:26px; 
margin:99px 1px 0 0; 
background: url(/assets/images/accordion/score.png) no-repeat 100% 100%; 
display: inline; /* IE 6 double float bug */ 
} 

Answer 1

我不明白爲什麼你不應該建立自己的 - 下面是我的嘗試，並在IE瀏覽器尚未經過測試，但它應該爲所有現代瀏覽器中運行：

#outer { 
    width: 30px; 
    height: 140px; 
    overflow: hidden; 

    position: relative; 
} 

#inner, #inner div { 
    width: 100%; 
    overflow: hidden; 
    position: absolute; 
} 

#inner { 
    bottom: 0; 
    height: 0%; 
} 

#inner div { 
    top: 0; 
    width: 100%; 
    height: 5px; 
} 

這裏的基本思路是使用絕對定位的div s將條中的每個元素移動到位置 - 最上面的div頂部獲得圓形頂部，位於進度條頂部top: 0，而進度條本身與bottom: 0對齊。

我在這裏設置了一個簡單的演示：http://www.jsfiddle.net/sNLXn/。演示使用邊框和背景來演示進度條，但實際應該使用圖像。

Answer 2

我不知道這是你需要什麼，但：

您可以更改CSS規則的高度，從百分比.score-completed DIV（目前爲50％）到px的固定高度（對於這個例子是40px）。然後，如果必須使綠色條更大，則可以在高度中添加像素，並從邊距中刪除相同數量的像素（當前爲99px）。

例如，如果您希望高度爲49px，則邊距必須爲90像素（因爲您在高度中添加了-9像素）。

編輯：你可以添加一個id到每個div與酒吧然後創建一個css規則。

例如：

<div class="score"> 
<div id="test" class="score-completed" style="height:80;"> 
<div id="first">&nbsp;</div> 
</div> 
</div> 
<div class="score"> 
<div id="test" class="score-completed" style="height:80;"> 
<div id="second">&nbsp;</div> 
</div> 
</div> 

然後刪除高度和邊距：從您的.score-completed div 99px併爲每個酒吧例如創建新的CSS規則：

#first {margin:99px 1px 0 0; height:40px; } 
#second {margin:90px 1px 0 0; height:49px; }