类别向左浮动的堆叠图

Question

我把CSS div当做一个图表，我试着做一个叠加图，其中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>

​