html - 没有百分比的进度条

标签 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 或服务器端编程。

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

最佳答案

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

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

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

关于html - 没有百分比的进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17776603/

相关文章:

javascript - 使用 JavaScript 或 CSS 添加 OnClick 事件

javascript - 从表单字段中获取最大数字

c# - 如何从后面的代码打开模式?

javascript - 如何使用 javascript 在输入中只允许 0 到 30 之间的数字或 A、D 字符?

javascript - 如何使用用 Javascript 编写的现有方法验证我的表单?

javascript - 使用 Javascript 在 HTML 页面上隐藏按钮的最佳方法

html - 是否可以在不占用列的情况下在TD中使用DIV

jquery - 响应 slider 图像高度自动不接受 Chrome

javascript - woocommerce 产品图片不循环显示

css - 让 2 个 div 填充页面的其余部分