底部的CSS元素大小，占父元素的百分比

Question

我正在尝试在CSS中制作垂直条形图，因此它看起来像这样：

但这与我的代码完全相反。 CSS元素如何从底部对齐？

HTML：

<div id="skill">
    <div><span class="bar nrml"></span>
    <span class="bar moderate"></span><span class="bar severe"></span>
</div>

CSS：

#skill {  
  font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  height: 200px;
  position: relative;
  padding: 0px 0;
}

#skill div {
  margin-bottom: 0px;
  background: #e9e5e2;
  width: 1em;
  border-radius: 10px;
  height: 200px;
}

.bar {
  width: 1em;
  height: 200px;
  margin: 1px 2px;
  position: absolute;
  border-radius: 10px;
}

.severe {
  height: 25%;
  background-color: #f674a4;
}

.moderate {
  height: 50%;
  background-color: #f0bb4b;
}

.nrml {
  height: 100%;
  background-color: #a1ce5b;
}

JSFiddle

Answer 1

您只需要添加bottom:0; 上课.severe 。 这里是一个新的更新小提琴： https : //jsfiddle.net/sebastianbrosch/yoqhkpwh/2/