Html 创建产品得分值

我是css和html新手，我想要cr8这样的产品框值

我试过了，但没有结果。 我希望.fill类是可动态修改的。 有人能帮我吗

.盒子{ 宽度：250px； 高度：30px； 背景：灰色； 颜色：白色 } .盒子.装满{ 浮动：左； 宽度：78%； 背景：橙色； 身高：100%； } .盒子，空的{ 位置：绝对位置； 空白：nowrap； 右：10px } .盒子.装满徽章{ 位置：绝对位置； 左侧填充：10px； 线高：30px } .盒子.空徽章{ 右边填充：10px； 线高：30px； } Radeon 7870 125.6 GB/S

---

你只需要看看你的绝对和相对位置。确保绝对定位的所有图元都位于定义了相对位置的图元内。所以在这种情况下，您只需要添加位置：relative；到盒子里去

.盒子{ 宽度：250px； 高度：30px； 背景：灰色； 颜色：白色； 位置：相对位置； } .盒子.装满{ 浮动：左； 背景：橙色； 身高：100%； } .盒子，空的{ 浮动：对； 空白：nowrap； 右：10px } .盒子.装满徽章{ 位置：绝对位置； 左：0； 左侧填充：10px； 线高：30px } .盒子.空徽章{ 位置：绝对位置； 右：0； 右边填充：10px； 线高：30px； } Radeon 7870 125.6 GB/S 我会使用相同元素的背景色和背景图像，如：

.盒子{ 宽度：240px； 填充：0 5px； 高度：30px； 线高：30px； 背景：fa0urlhttp://placehold.it/250x300/aaa 200px 0不重复； 颜色：白色； } .箱跨{ 浮动：对； } Radeon 7870 125.6 GB/S

---

必须将.box位置设置为相对

---

什么是填充徽章，什么是空徽章？橙色分数的文本徽章，空是我想右侧显示的单位分数文本。当填充宽度设置为+60%时，它不会显示125.6 GB/s单位。不确定在我编辑之前是否发布了此徽章，但可以使用。在演示中，填充60%更改为60%。我如何将其与动态值一起使用？像90%或100%我想在这个分数显示单位感谢设置宽度与CSS几乎可以防止这一点。您必须使用JS并从数据属性等读取，或者您可以使用内联样式宽度：60%；并且在页面加载时设置了数字，我更新了示例以显示这一点。有效，但我无法更改值分数背景，我想要它dynamically@jessieomline你是说橙色的那个你试过颠倒逻辑吗？左200像素的灰色背景和橙色背景色？@jessieomline。。。编辑。现在，您可以动态更改fa0颜色。

.box {
    width: 250px;
    height: 30px;
    background: grey;
    color: white
    position: relative;
}