html - 创建产品分数值

Question

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

http://i.imgur.com/kMogtMz.png

我试过这些但没有得到任何结果。
我希望 .fill 类可以动态修改。
任何人都可以帮助我吗？

.box {
  width: 250px;
  height: 30px;
  background: grey;
  color: white
}
.box .fill {
  float: left;
  width: 78%;
  background: orange;
  height: 100%;
}
.box .empty {
  position: absolute;
  white-space: nowrap;
  right: 10px
}
.box .fill-badge {
  position: absolute;
  padding-left: 10px;
  line-height: 30px
}
.box .empty-badge {
  padding-right: 10px;
  line-height: 30px;

}

<div class="box">
  <div class="fill"><div class="fill-badge">Radeon 7870</div></div>
  <div class="empty"><div class="empty-badge">125.6 GB/S</div></div>
</div>

Answer 1

您只需要查看您的绝对 和相对 定位。确保所有绝对定位的元素都在以相对定义为位置的元素内。所以在这种情况下，您只需要将 position: relative; 添加到 .box 即可。

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

    .box .fill {
      float: left;
      background: orange;
      height: 100%;
    }

    .box .empty {
      float: right;
      white-space: nowrap;
      right: 10px
    }

    .box .fill-badge {
      position: absolute;
      left: 0;
      padding-left: 10px;
      line-height: 30px
    }

    .box .empty-badge {
      position: absolute;
      right: 0;
      padding-right: 10px;
      line-height: 30px;
    }

<div class="box">
  <div class="fill" style="width:60%;">
    <div class="fill-badge">Radeon 7870</div>
  </div>
  <div class="empty">
    <div class="empty-badge">125.6 GB/S</div>
  </div>
</div>

编辑以显示内联样式。