我希望能够创建一个垂直的百分比柱形图,我已经成功地创建了一个水平的进度条,使用了这个CSS Progress Bar,但现在我想模仿它并将其垂直显示。
请问,我是否可以做到这一点呢?
以下是垂直柱形图的代码:
请问,我是否可以做到这一点呢?
以下是垂直柱形图的代码:
<div class="score">
<div id="test" class="score-completed" style="height:80;">
<div> </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 */
}