Question

我是css和html的新手我想知道像这样的产品盒价值

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

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

＆＃13;

    .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;
    }

＆＃13;

<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>

＆＃13;

编辑以显示内联样式。

Answer 2

我会使用背景颜色和背景图片为同一元素执行此操作，如：

.box {
    width: 240px;
    padding: 0 5px;
    height: 30px;
    line-height: 30px;
    background: #fa0 url(http://placehold.it/250x300/aaa) 200px 0 no-repeat;
    color: white;
}
.box span{
    float:right;
}

<div class="box">
    Radeon 7870 <span>125.6 GB/S</span>
</div>

Answer 3

您必须将.box位置设置为相对位置。 http://jsfiddle.net/Lzmop76a/

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

创建产品得分值

3 个答案: