如何将HTML按钮固定在其卡片容器底部？

我正在制作一个基于Jekyll Moonwalk主题的列表网站，根据自身需求做了大量修改，这是我的第一个网站项目。目前需要让HTML按钮固定在容器底部（而非文本底部），实现所有按钮对齐。当前效果如图：

红线位置是我希望所有按钮底部所在的位置。我尝试过ChatGPT给出的方案，但没有效果，方案代码如下：

<div style="position: relative;">
  <button style="position: absolute; bottom: 0;">Click Me</button>
</div>

可行解决方法 #

方法1：Flex布局（推荐）

给按钮所在容器设置Flex布局，通过空间分配将按钮推至底部：

<div style="display: flex; flex-direction: column; height: 100%;">
  <!-- 容器内的文本内容 -->
  <p>列表项的文本内容...</p>
  <button>点击按钮</button>
</div>

注意：如果容器的父元素没有设置高度，需给父元素也添加height: 100%;或固定高度，保证容器能撑满可用空间。

方法2：Grid布局

利用Grid的行分配规则，让按钮自动固定在容器底部，无需设置容器高度：

<div style="display: grid; grid-template-rows: 1fr auto;">
  <!-- 文本内容区域 -->
  <div>列表项的文本内容...</div>
  <button>点击按钮</button>
</div>

1fr会让文本区域填充容器剩余空间，auto让按钮自适应高度并留在底部。

方法3：修复绝对定位方案

若坚持使用绝对定位，需补充两个关键设置：

<div style="position: relative; height: 200px;">
  <p>列表项的文本内容...</p>
  <button style="position: absolute; bottom: 10px; left: 0;">点击按钮</button>
</div>

• 容器必须设置position: relative;作为按钮的定位参考
• 给容器设置明确的高度（固定值或min-height均可）
• 按钮添加left: 0;避免位置偏移

内容的提问来源于stack exchange，提问作者Darkblade