如何将元素锚定到包含可变高度内容的div的底部？

Question

我创建了此页面，仅使用HTML和CSS进行练习。我的问题是按钮（如注释，观察）根据包含div中其他文本的高度垂直移动，而不是停留在容器的底部。我该如何解决这个问题？

Answer 1

我假设你像这样包装你的HTML

<div class="box">
  <img></img>
  <p></p>
  <footer class="like">
</div>

如果你将包装器位置设置为相对且页脚位置为绝对位置，则底部为0，它应该可以工作。

.box {
  position:relative;
}

.like {
  position: absolute;
  bottom: 0
}

请参阅https://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_bottom

并在div.absolute中，尝试将bottom更改为0px。