html - Css 问题栏以百分比贝斯从左向右移动

Question

我正在尝试创建一个 graoh 以按百分比显示正值和负值，所以如果值为负，它将显示为红色条，如果值为正，它将显示为红色条，所以问题是我遇到问题时将宽度设置为 46 或 50%，栏显示为全尺寸，因为它不应该是任何人都可以帮我解决这个问题吗

.box {
  position: relative;
  width: 400px;
  height: 30px;
  background-color: #333
}

.bar_red {
  background-color: #d40216 !important;
  left: 50%;
  width: 13%;
  max-width: 180px;
}

.bar_green {
  right: 50%;
}

.bar_green,
.bar_red {
  width: 42%;
  height: 20px;
  background-color: #88c500;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}

<div class="box">
  <div class="bar_red" style="width: 50%;"></div>
  <div class="bar_green" style="width: 50%;"></div>
</div>

https://jsfiddle.net/vck8wchh/

Answer 1

首先，您的杠铃被拉动了 50%。看下面的例子

.bar_green {
   right: 50%;
}
.bar_red {
   left: 50%;
}

所以这意味着如果您在 <div style="50%"> 中填写 50% 或更高它将是全宽的。转到你的 fiddle ，例如用以下内容替换你的 HTML:

<div class="box">
<div class="bar_red" style="width: 10%;"></div>
<div class="bar_green" style="width: 30%;"></div>
</div> 

您会看到它们不会被完全填满。新jsfiddle