Question

我有以下代码。我希望使用它来实现堆叠的垂直进度条。但是，当我尝试时，它们并排堆叠在一起，而不是堆叠在一起。

.progress-bar-vertical {
  width: 20px;
  min-height: 100px;
  display: flex;
  align-items: flex-end;
  margin-right: 20px;
  float: left;
}

.progress-bar-vertical .progress-bar {
  width: 100%;
  height: 0;
  -webkit-transition: height 0.6s ease;
  -o-transition: height 0.6s ease;
  transition: height 0.6s ease;
}
<div class="container">

  <div class="progress progress-bar-vertical">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="height: 30%;">
    </div>
        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="height: 40%;">
    </div>
  </div>

</div>

Answer 1

尝试在 flex-direction: vertical; 中使用 .progress-bar-vertical。如果我没记错的话，您必须在使用 flex 时定义高度。为了分配足够的空间，请尽量省略高度。

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

如何创建垂直堆叠的进度条html

1 个答案: