如何使用CSS實現條形統計

.bar {
width: 20px; /* 柱狀圖的寬度 */
display: inline-block; /* 使柱狀圖橫向排列 */
margin-right: 5px; /* 柱狀圖間隔 */
position: relative; /* 相對定位 */
height: 100px; /* 柱狀圖的高度 */
}
.bar span {
position: absolute; /* 絕對定位 */
bottom: -20px; /* 數字與柱狀圖的距離 */
left: 0;
right: 0;
text-align: center;
font-size: 12px;
font-weight: bold;
}
.bar.green {
background: green; /* 柱狀圖的顏色 */
}
.bar.yellow {
background: yellow;
}
.bar.blue {
background: blue;
}

HTML代碼如下：

<div class="bar green">
<span>50</span>
</div>
<div class="bar yellow">
<span>30</span>
</div>
<div class="bar blue">
<span>20</span>
</div>

效果如下：