无法将div内容设置为底部

Question

我有这个div：

<div class="step-container">
  <div class="step1">
    <button>STEP 1</button>
    <b>Sed leo enim condimentum</b>
    <p>Quisque libero libero, dictum non turpis in, luctus semper lorem. Donec rhoncus a leo sit amet facilisis.</p>
  </div>
</div>

我想在底部设置div的内容，所以最终的结果应该是：

但我明白了：

这是我的css：

.step-container
{
  background-repeat: no-repeat;
  font-family: Montserrat;
  font-size: 22px;
  font-weight: 700;
  position: absolute;
  top: 854px;
  left: 248px;
}

.step1
{
  background-image: url("pic.png");
  width: 300px;
  height: 400px;
  color: #333333;
  bottom:0;
}

Answer 1

CSS属性底部仅适用于定位元素（相对，绝对或固定）。有关更多信息，请参阅css职位的文档。

.step-container
{
  background-repeat: no-repeat;
  font-family: Montserrat;
  font-size: 22px;
  font-weight: 700;
  position: relative;
  width: 300px;
  height: 1000px;
}

.step1
{
  position: absolute;
  background-image: url("pic.png");
  width: 300px;
  height: 400px;
  color: #333333;
  bottom:0;
}

Answer 2

在.step1 div上尝试使用以下代码：

display: flex;
align-items: flex-end;
flex-wrap: wrap;

您还可以添加align-content: flex-end;（或其他内容）来处理div中元素之间的空格。

或者将绝对位置和底部属性放在.step1上，以及.step-container上的相对位置。