将 child 表示为 parent 的小数背景宽度

Question

我正在尝试在条形图内直观地表示民意调查的结果。

我无法在项目中正确显示分数栏。

这是我目前的情况：

#poll {
  max-width: 480px;
}

.score {
  float: right;
}

.item {
  border: 1px solid grey;
  padding: 5px;
  margin: 3px 0;
}

.bar {
  display:block;
  background: #61CE3C;
  height: 100%;
  position: relative;
  z-index: -1;
}

<div id="poll">
  <div class="item">
    <span class="bar" style="width:84.6%;"> </span>
    <span class="title">More than 10</span>
    <span class="score">84.6%</span>
  </div>
  <div class="item">
    <span class="bar" style="width:0;"> </span>
    <span class="title">Between 5 and 10</span>
    <span class="score">0%</span>
  </div>
  <div class="item">
    <span class="bar" style="width:15.4%;"> </span>
    <span class="title">Less than 5</span>
    <span class="score">15.4%</span>
  </div>
</div>

如何将标题和分数后面的背景栏显示为 parent 项的小数宽度？

Answer 1

您可以为 item 提供 flex 显示并移除 z-index:-1

#poll {
  max-width: 480px;
}

.item {
  border: 1px solid grey;
  padding: 5px;
  margin: 3px 0;
  width: 100%;
  display: flex;
}

.score {
  margin-left: auto;
}

.bar {
  background: #61CE3C;
}

<div id="poll">
  <div class="item">
    <span class="bar" style="width:84.6%;"> </span>
    <span class="title">More than 10</span>
    <span class="score">84.6%</span>
  </div>
  <div class="item">
    <span class="bar" style="width:0;"> </span>
    <span class="title">Between 5 and 10</span>
    <span class="score">0%</span>
  </div>
  <div class="item">
    <span class="bar" style="width:15.4%;"> </span>
    <span class="title">Less than 5</span>
    <span class="score">15.4%</span>
  </div>
</div>

Answer 2

简单地使用背景线性渐变：

#poll {
  max-width: 480px;
}

.score {
  float: right;
}

.item {
  border: 1px solid grey;
  padding: 5px;
  margin: 3px 0;
}

<div id="poll">
  <div class="item" style="background: linear-gradient(to right, #a6e2ae 84.6%, transparent 0px);">
    <span class="title">More than 10</span>
    <span class="score">84.6%</span>
  </div>
  <div class="item" style="background: linear-gradient(to right, #a6e2ae 0%, transparent 0px);">
    <span class="title">Between 5 and 10</span>
    <span class="score">0%</span>
  </div>
  <div class="item" style="background: linear-gradient(to right, #a6e2ae 15.4%, transparent 0px);">
    <span class="title">Less than 5</span>
    <span class="score">15.4%</span>
  </div>
</div>

将 child 表示为 parent 的小数背景宽度

Represent child as a fractional background width of parent

html

css

data-visualization