CSS align-content让普通元素柱状图居底实例页面

回到相关文章 »

效果：

代码：

CSS代码：

.box {
    height: 200px;
    border-bottom: 1px solid;    
    border-left: 1px solid;
    align-content: end;
}
.bar {
    display: inline-block;
    width: 10px;
    margin-inline: 20px;
    background-color: green;
    height: calc(1% * var(--percent));
    vertical-align: bottom;
}

HTML代码：

<div class="box">
    <div class="bar" style="--percent: 20"></div>
    <div class="bar" style="--percent: 40"></div>
    <div class="bar" style="--percent: 70"></div>
    <div class="bar" style="--percent: 50"></div>
</div>