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％或更高，它将是全宽。转到你的小提琴，例如用以下内容替换你的HTML：

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

你会发现它们不会被完全填满。新jsfiddle

Answer 2

我可以建议一个更简单的解决方案吗？在我的片段中，绿色条100％宽，而红色条的宽度为百分比，右对齐并使用较高的z-index覆盖绿色条。所以你只需要设置红条的百分比。

＆＃13;

.box {
  position: relative;
  width: 390px;
  height: 20px;
  background-color: #333;
  border: 5px solid #333;
}

.bar_green,
.bar_red {
  height: 20px;
  position: absolute;
}

.bar_green {
  left: 0;
  width: 100%;
  background-color: #88c500;
  z-index: 1;
}

.bar_red {
  background-color: #d40216 !important;
  right: 0;
  width: 42%;
  z-index: 2;
}

＆＃13;

<div class="box">
  <div class="bar_red"></div>
  <div class="bar_green"></div>
</div>

＆＃13;

Css在百分比贝斯上发出从左到右移动的条形图

2 个答案: