时间戳

首页 > 解决方案 > 如何将一个值相乘，然后将该数字乘以十，然后将结果除以三，然后将结果转换为百分比？

html - 如何将一个值相乘，然后将该数字乘以十，然后将结果除以三，然后将结果转换为百分比？

问题描述

如何将一个值相乘，然后将该数字乘以十，然后将结果除以三，然后将结果转换为百分比？我试过这样做：

.bar {
  width: calc(100% / 3);
  height: 30px;
  background-color: white;
  outline: 1px solid black;
}

.red {
  --widthB: calc(300 / 400);
  --widthC: calc(var(--widthB)*10);
  --widthA: calc(var(--widthC) / 3);
  height: 30px;
  position: absolute;
  background-color: red;
}
<center>
  <h1>141k</h1>
  <div class="percentage-bar">
    <div class="bar">
      <div class="red">
      </div>
    </div>
  </div>
</center>

标签： htmlcss

解决方案

如果我正确理解了您的问题，您正在尝试.red根据 中计算的值将宽度设置为百分比，--widthA这样可以完成：

<center>
    <h1>141k</h1>
    <div class="percentage-bar">
     <div class="bar">
      <div class="red">
      </div>
     </div>
    </div>
 </center>
<style>
.bar {
  width: calc(100% / 3);
  height: 30px;
  background-color: white;
  outline: 1px solid black;
}

.red {
  --widthB: calc(300/400);
  --widthC: calc(var(--widthB)*10);
  --widthA: calc(var(--widthC) / 3);
  width: calc(var(--widthB) * 1%);
  height: 30px;
  position: absolute;
  background-color: red;
}
</style>

推荐阅读