Question

我正在寻找一个垂直条，我可以更改百分比条的百分比，但是在垂直格式中，我已经成功地使用它来获得水平的工作：CSS Progress Bar但是现在我想模仿但垂直。

这是垂直条的代码：

<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来将条形中的每个元素移动到位置 - 顶部的最里面的div获得圆顶，位于顶部带有top: 0的进度条，而进度条本身与bottom: 0底部对齐。

我在这里设置了一个简单的演示：http://www.jsfiddle.net/sNLXn/。演示使用边框和背景来演示进度条，但真实的应该使用图像。

Answer 2

我不知道这是否是你需要的，但是：

您可以使用px将css规则.score-completed div的高度从百分比（当前为50％）更改为固定高度（对于此示例为40px）。然后，当您必须使绿色条更大时，可以在高度中添加像素，并从边距（当前为99px）中删除相同数量的像素。

例如，如果您希望高度为49px，则边距必须为90px（-9像素，因为您添加了高度）。

编辑：你可以用条形图为每个div添加一个id，然后创建一个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; }

垂直CSS / HTML5进度条

2 个答案: