CSS模仿一个简单的条形图

Question

我正在尝试使用 css 创建它，但很难让它正确对齐。我只是想填充一个从 div 的中点开始并且其高度等于百分比的框。如果它超过一定百分比，我希望它位于填充的 div 中。猜测这并不难，但我似乎无法弄清楚。主要是如何让填充框从一半向下开始，并根据正或负向上或向下填充。

如果有任何帮助，我将不胜感激。

jsbin 链接

http://jsbin.com/lexifetuja/edit?html,css,js,output

.col-sm-3 {
  border: 1px solid #000;
  height:200px;
}

.fill-box {
    background-color: #213F5E;
  width:100%;
  position: absolute;
  top: 50%
}

.fill-box1 {
    height: 6%;
}

.fill-box2 {
    height: 41%;
}

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <span class="percentage text-left">12%</span>

            <div class="fill-box fill-box1"></div>
        </div>

        <div class="col-sm-3">
            <span class="percentage text-left">-82%</span>

            <div class="fill-box fill-box2"></div>
        </div>
    </div>
</div>

Answer 1

您可以为负百分比 fill-box 元素添加一个类，并将 top 位置设置为 100px(以便顶部元素从容器的中间点开始)，然后对于正百分比 fill-box 只需将 top 位置设置为负剩余百分比:

.col-sm-3 {
  border: 1px solid #000;
  height:200px;
}

.fill-box {
  background-color:#213F5E;
  width:100%;
  position:absolute;
  top:50%;
  left:0;
}
  .fill-box.negative {
    top:100px;
  }

.fill-box1 {
  height:6%;
  transform:translateY(-94%);
}

.fill-box2 {
  height:41%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <span class="percentage text-left">12%</span>

            <div class="fill-box fill-box1"></div>
        </div>

        <div class="col-sm-3">
            <span class="percentage text-left">-82%</span>

            <div class="fill-box fill-box2 negative"></div>
        </div>
    </div>
</div>