0

这是问题所在：我有一个值和一个最大值，我想像进度条一样显示它们（除非没有进度:-)：该值显示为一个宽度相对于最大值的条。

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

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

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

我无法弄清楚一些事情，所以现在我正在寻找一个好主意。

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

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

4

3 回答 3

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

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

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

于 2013-07-21T20:55:30.853 回答
1

你已经回答了你自己的问题，除了你假设你的答案是错误的。它不是。您应该在 CSS 中使用百分比来执行此操作。

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

于 2013-07-21T20:47:20.810 回答
1

您在 HTML5 中有一个标签：

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

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

于 2013-07-21T20:58:11.213 回答