javascript - 如何制作一个简单的 HTML CSS 时间图

Question

我正在尝试使用 HTML CSS div 创建一个显示实验室使用时间的时间图。我把一些东西放在一起，但结果并不像我想象的那么好。

div {
  height: 30px;
  margin-top: 20px;
}

.alloted {
  background-color: blue;
  border: 2px solid black;
  text-align: left;
  height: 80px;
  width: 70%;
  position: absolute;
  opacity: 0.5;
}

.actual {
  opacity: 0.6;
  background-color: gray;
  border: 2px solid black;
  text-align: left;
  height: 60px;
  width: 65%;
  margin-left: 2%;
  margin-top: 40px;
  position: absolute;
}

.bringUp {
  background-color: orange;
  border: 2px solid black;
  text-align: left;
  width: 10%;
  display: inline-block;
  float: left;
}

.idle {
  background-color: brown;
  border: 2px solid black;
  text-align: left;
  width: 10%;
  display: inline-block;
  float: left;
}

.lost {
  background-color: red;
  border: 2px solid black;
  text-align: left;
  width: 5%;
  display: inline-block;
  float: left;
}

.used {
  background-color: green;
  border: 2px solid black;
  text-align: left;
  width: 55%;
  display: inline-block;
  float: left;
}

<div class="actual">
  Actual Time Used
  <div class="bringUp">
    Bring Up
  </div>
  <div class="idle">
    Idle
  </div>
  <div class="lost">
    Lost
  </div>
  <div class="used">
    Used
  </div>
</div>
<div class="alloted">
  Alloted Lab Shot
</div>

我想要实现的是创建一个“实际”时间 block ，它由几个连续的 block 组成(启动、空闲、丢失、使用)。我还需要创建另一个 block ，它可以在实际时间 block 的内部或外部移动以表示分配的时间。该行为与堆栈条形图非常相似，但又不完全相同。宽度在上面的 CSS 中是硬编码的，但想法是这些值将基于用户输入。

任何实现这一目标的建议都会很棒!

Answer 1

你可以这样做:

• 将从父级继承的边距设置为 0
• 在这种情况下，手动设置高度是最简单的方法
• 将“实际使用时间”放在绝对定位范围内

div {
  box-sizing: border-box;
  height: 30px;
  margin-top: 20px;
}

.alloted {
  background-color: blue;
  border: 2px solid black;
  text-align: left;
  height: 80px;
  width: 100%;
  position: absolute;
  opacity: 0.5;
}

.actual {
  opacity: 0.6;
  background-color: gray;
  border: 2px solid black;
  text-align: left;
  height: 60px;
  width: 65%;
  margin-left: 2%;
  margin-top: 40px;
  position: absolute;
}

.actual span {
  position: absolute;
  bottom: 20px;
  right: 50%;
}

.bringUp {
  margin: 0;
  height: 58px;

  background-color: orange;
  border: 2px solid black;
  text-align: left;
  width: 10%;
  display: inline-block;
  float: left;
}

.idle {
  margin: 0;
  height: 58px;

  background-color: brown;
  border: 2px solid black;
  text-align: left;
  width: 10%;
  display: inline-block;
  float: left;
}

.lost {
  margin: 0;
  height: 58px;

  background-color: red;
  border: 2px solid black;
  text-align: left;
  width: 5%;
  display: inline-block;
  float: left;
}

.used {
  margin: 0;
  height: 58px;

  background-color: green;
  border: 2px solid black;
  text-align: left;
  width: 55%;
  display: inline-block;
  float: left;
}

<div class="actual">
  <span>Actual Time Used</span>
  <div class="bringUp">
    Bring Up
  </div>
  <div class="idle">
    Idle
  </div>
  <div class="lost">
    Lost
  </div>
  <div class="used">
    Used
  </div>
</div>
<div class="alloted">
  Alloted Lab Shot
</div>