[英]size css element from bottom as a percent of parent
I'm trying to get a vertical bar graph made in css, so it appears to look like this: 我正在尝试在CSS中制作垂直条形图,因此它看起来像这样:
But it's flipped upside down with my code. 但这与我的代码完全相反。 How can the CSS elements be aligned from the bottom? CSS元素如何从底部对齐?
HTML: HTML:
<div id="skill">
<div><span class="bar nrml"></span>
<span class="bar moderate"></span><span class="bar severe"></span>
</div>
CSS: 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;
}
You have to just add bottom:0;
您只需要添加bottom:0;
to the class .severe
. 上课.severe
。 Here a new updated fiddle: https://jsfiddle.net/sebastianbrosch/yoqhkpwh/2/ 这里是一个新的更新小提琴: https : //jsfiddle.net/sebastianbrosch/yoqhkpwh/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.