设置Div内容位置：使同行Div的底部文本对齐

这问题很常见，核心就是要让每个.testDiv里的底部文本（LineBot）固定在容器底部，不受上方内容高度变化的影响。我们可以借助Flex布局的margin-top: auto特性来实现，具体操作如下：

1. 修改容器CSS，开启垂直Flex布局 #

首先给.testDiv添加Flex相关属性，让它内部元素可以垂直方向排布，同时确保容器占满父级col-2的高度：

.testDiv {
  border: solid;
  border-width: thin;
  border-radius: 1rem;
  margin-top: 0.5rem;
  margin-right: 0.5rem;
  padding: 0.5rem;
  text-align: center;
  /* 新增Flex配置 */
  display: flex;
  flex-direction: column;
  height: 100%;
}

2. 给底部文本设置自动顶边距 #

给每个.testDiv里最后一个<p>（也就是LineBot）添加margin-top: auto，这个属性会让元素自动“挤”到容器底部，占据上方所有剩余空间：

.testDiv p:last-child {
  margin-top: auto;
  margin-bottom: 0; /* 可选，移除默认底部外边距让对齐更紧凑 */
}

原理说明 #

Bootstrap的row默认是Flex布局，里面的col-2会被自动拉伸到同一高度。我们给.testDiv设置height: 100%就是让它继承这个统一高度，再配合内部的Flex布局和margin-top: auto，就能让底部文本始终固定在容器底部，自然所有LineBot就处于同一水平线了。

完整代码示例 #

<style>
.testDiv {
  border: solid;
  border-width: thin;
  border-radius: 1rem;
  margin-top: 0.5rem;
  margin-right: 0.5rem;
  padding: 0.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.testDiv p:last-child {
  margin-top: auto;
  margin-bottom: 0;
}
</style>

<div class="col-12 row">
  <div class="col-2 testDiv">
    <p>LineTop1</p>
    <hr />
    <p>LineBot</p>
  </div>
  <div class="col-2 testDiv">
    <p>LineTop1</p>
    <hr />
    <p>LineBot</p>
  </div>
  <div class="col-2 testDiv">
    <p>LineTop1 LineTop1 LineTop1</p>
    <hr />
    <p>LineBot</p>
  </div>
  <div class="col-2 testDiv">
    <p>LineTop1</p>
    <hr />
    <p>LineBot</p>
  </div>
  <div class="col-2 testDiv">
    <p>LineTop1</p>
    <hr />
    <p>LineBot</p>
  </div>
</div>

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