垂直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; }