没有百分比的进度条

时间:2013-07-21 20:30:47

标签: html css

这是问题所在: 我有一个值和一个最大值,我想在进度条中显示它们(除了没有进展:-):该值显示为宽度相对于最大值的条形。

我不能用百分比来做这件事:

<div class="bar"><div class="bar-content" style="width:xx%"></div>

因为我只知道值和最大值,所以我不会“知道”百分比的相对值。 我知道我可以使用一些javascript或在服务器端做一些事情,但我宁愿只使用 css和html

我无法弄明白所以现在我正在寻找一个好主意。

我将尝试更具体地解释:我有一个值(比如20)和一个最大值(比如说80)我希望将值显示为条形,其宽度为20/80 =其宽度的25%容器。我想这样做只使用HTML,CSS,20(值)和80(最大值)。我没有除了值和最大值之外的数据,所以我无法计算百分比,因为我不想要没有javascript或服务器端编程。

我认为这是不可能的,但我们永远不会知道。

3 个答案:

答案 0 :(得分:2)

style="width: -prefix-calc(20/80 * 100%)"

这适用于所有现代浏览器,包括Internet Explorer。

演示:http://jsfiddle.net/aN9WW/

答案 1 :(得分:1)

你已经回答了自己的问题,除非你认为答案是对的。不是。你应该用你的css中的百分比来做这个。

如果您事先知道值和最大值,那么根据定义,您事先知道内部<div>的百分比宽度,因为它是值和最大值的函数。

答案 2 :(得分:1)

你在HTML5中有一个标签:

<progress value="20" max="80">20<progress/>

http://codepen.io/anon/pen/rejdJ

相关问题