垂直CSS/HTML5进度条

Question

垂直CSS/HTML5进度条

3

我希望能够创建一个垂直的百分比柱形图，我已经成功地创建了一个水平的进度条，使用了这个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 */
}

- Solidariti

1

你的第二个链接无法打开。 - oezi

2个回答

1

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

您可以将 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 的高度和 margin:99px 去掉，并为每个柱状图创建新的 CSS 规则，例如：

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

- Sotiris

好观点Sotiris，但我将在一页上拥有不止一个。 - Solidariti

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yi Jiang · Accepted Answer

我认为你很有可能自己构建这个功能 - 下面是我的建议，尚未在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/。 演示使用边框和背景来展示进度条，但实际上应该使用图像。