css, um ein einfaches Balkendiagramm zu imitieren

Question

Ich versuche, dies mit CSS zu erstellen und es schwer zu bekommen, es richtig auszurichten. Ich versuche nur, eine Box zu füllen, die am Mittelpunkt eines div beginnt und ihre Höhe gleich dem Prozentsatz hat. Wenn es einen bestimmten Prozentsatz überschreitet, möchte ich, dass es innerhalb des gefüllten div ist. Das zu schätzen, ist nicht so schwer, aber ich kann es nicht herausfinden. Hauptsächlich, wie man die Füllbox auf halbem Weg nach oben und nach unten oder oben füllen kann, abhängig von positiv oder negativ.

Ich würde jede Hilfe zu schätzen wissen.

jsbin Link

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

eine Klasse für negative Prozent fill-box Elemente hinzufügen könnte und stellen Sie die top Position 100px (so dass die Oberseite des Elements beginnt bei den halben Wegpunkt des Behälters) und dann für den positiven Prozentsatz fill-box setzen Sie einfach die top Position negativ den verbleibenden Prozentsatz:

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