我制作了一个简单的仅限CSS的条形图，但所有条形都从顶部开始。
.wrap {
width: 400px;
position: relative;
overflow: hidden;
}
.barchart {
display: inline-block;
margin-left: 0.2px;
}
.barchart.column {
width: 11px;
margin-left: 3px;
font-size: xx-small;
text-align: center;
color: #fff;
}<div class="wrap">
<div class="barchart column" style="background: #666; height:
50px">5</div>
<div class="barchart column" style="background: #666; height:
70px">7</div>
</div>演示：https : //jsfiddle.net/jL68sa0h/
我已经尝试设置位置：相对于父级div和位置：绝对；酒吧，它没有用..
仅使用CSS如何使条形图固定在底部？谢谢！
使用flex-flow: wrap-reverse;或align-items: flex-end;
.wrap {
display : flex;
flex-flow: wrap-reverse;
}
解：
.wrap {
width: 400px;
position: relative;
overflow: hidden;
display : flex;
flex-flow: wrap-reverse;
height:100vh;
}
.barchart {
display: inline-block;
margin-left: 0.2px;
}
.barchart.column {
width: 11px;
margin-left: 3px;
font-size: xx-small;
text-align: center;
color: #fff;
}<div class="wrap">
<div class="barchart column" style="background: #666; height: 50px">5</div>
<div class="barchart column" style="background: #666; height: 70px">7</div>
<div class="barchart column" style="background: #666; height: 90px">9</div>
<div class="barchart column" style="background: #666; height: 110px">11</div>
<div class="barchart column" style="background: #666; height: 130px">13</div>
<div class="barchart column" style="background: #666; height: 80px">8</div>
<div class="barchart column" style="background: #666; height: 100px">10</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句