垂直CSS进度条

Question

我正在创建一个仅使用HTML和CSS自下而上的进度表。我面临的问题是叠加的图像没有排列在它所属的位置。有人可以帮帮我吗？

修改

以下是代码：

<h2>Fall Fest Candy Collection</h2>
<p>The Fall Fest candy collection has begun!  Follow along with the progress bar as we attempt to reach our goal of one million pieces of candy!</p>
<p>&nbsp;</p>
<div id="progress-bar">
<div id="progress-level" style="height: 79%; bottom: 0px; text-align: center;"></div>
</div>
<p style="margin-bottom: 15px; text-align: center;">79% collected</p>
<p> </p>

Answer 1

• 在#progress-bar上，设置position: relative。
• 在#progress-level上，移除margin-top: 133px并添加bottom: 0。然后，将height更改为更高的数字，例如50%，以便您可以看到它正常工作。

Answer 2

我修复了：

<div id="progress-level" style="height: 7%; margin-top: 76px; text-align: center;"></div>

将上边距更改为76px。 这是Chrome的开发者工具。

Answer 3

我会尝试使用 position：relative 和 bottom 属性来提升＃progress-level，但我现在无法尝试，我在移动设备;-)。