與類別左側的堆棧圖浮動

Question

我正在玩CSS圖形作爲圖表，我試圖做一個堆積圖，其中div等於div的寬度的100％，並且酒吧的左側部分是一個顏色和酒吧的另一部分是另一個。現在，我有：

.chart div { 
 
    font: 25px sans-serif; 
 
    background-color: #2c3e50; 
 
    text-align: right; 
 
    padding: 3px; 
 
    margin: 1px; 
 
    color: white; 
 
}

<div class="chart"> 
 
    <div style="width: 49.81%;">1, $4,980,777</div> 
 
    <div style="width: 41.10%;">2, $4,109,778</div> 
 
</div>

這裏是https://jsfiddle.net/j63grq88/

Answer 1

嘗試增加display: inline-block;雙方的div

Answer 2

試試這個：

.chart{ 
 
    overflow-x:hidden; 
 
} 
 
.chart div { 
 
    font: 25px sans-serif; 
 
    background-color: #2c3e50; 
 
    text-align: right; 
 
    padding: 3px; 
 
    margin: 1px; 
 
    color: white; 
 
    position: relative; 
 
} 
 
.chart div:after{ 
 
    content: ''; 
 
    position: absolute; 
 
    top:0; 
 
    left:0; 
 
    width: 300%; 
 
    height: 100%; 
 
    background: red; 
 
    z-index: -1; 
 
}

<div class="chart"> 
 
    <div style="width: 49.81%;">1, $4,980,777</div> 
 
    <div style="width: 41.10%;">2, $4,109,778</div> 
 
</div>