javascript - 如何将按钮保持在动态变化的 div 的底部中心？

Question

所以我有一个容器，里面有一些文本，文本后面有一个按钮。这个小部件在我的屏幕上重复了几次。每个容器都根据其内容的高度和引导列设置高度，因此其宽度也会发生变化。我的问题是我希望按钮始终粘在其小部件的底部，但是如果我设置 position: absolute;底部:0； right:25%; 只要小部件宽度不变，它就会居中。它是做什么的。有什么建议吗？

Answer 1

这是您“灵活”的 friend 在行动。出于说明目的，我使用了一些任意大小的 div:

div {
  background: pink;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  float: left;
  margin-right: 10px
}

#flexDiv1 {
  height: 200px;
  width: 100px;
}

#flexDiv2 {
  height: 300px;
  width: 70px;
}

#flexDiv3 {
  height: 100px;
  width: 200px;
}

<div id="flexDiv1">
  <a href="#">link</a>
</div>

<div id="flexDiv2">
  <a href="#">link</a>
</div>

<div id="flexDiv3">
  <a href="#">link</a>
</div>