html - 没有百分比的进度条

Question

问题来了:我有一个值和一个最大值，我想像在进度条中一样显示它们(除了没有进度:-):值显示为一个条，其宽度相对于最大值。

我不能用百分比来做到这一点:

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

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

我想不通，所以现在我正在寻找一个好主意。

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

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

Answer 1

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

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

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