如何使用CSS实现两个div并排且一个置于底部（含表格场景）

针对你提出的两个布局需求，以下是使用display或position属性的具体实现方案：

一、表格单元格内的实现 #

表格单元格的布局有一定特殊性，但依然可以通过CSS灵活控制内部元素的对齐方式。

方法1：Flex布局（推荐） #

利用Flex布局的对齐属性，可以轻松实现子元素的底部对齐，且不会破坏表格的正常流。结合你提供的HTML代码，调整如下：

/* 针对你代码中的.d-flex容器 */
.d-flex {
  display: flex;
  gap: 2px;
  align-items: flex-end; /* 让所有子元素沿容器底部对齐 */
}

/* 如果你只需要特定div（比如.empty_div）底部对齐，单独设置 */
.empty_div {
  align-self: flex-end;
  width: 20px;
  height: 30px;
  background-color: #ccc; /* 仅用于可视化效果 */
}

• 若要所有并排元素都底部对齐，给父容器.d-flex设置align-items: flex-end即可；
• 若仅需要某一个div底部对齐，给该div添加align-self: flex-end，其他元素保持默认对齐方式。

方法2：Position定位 #

通过绝对定位将目标div固定在单元格底部，但需要注意单元格的高度和空间预留：

/* 给表格单元格设置相对定位 */
td {
  position: relative;
  padding-bottom: 25px; /* 为底部元素预留空间 */
}

.empty_div {
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 20px;
  height: 30px;
  background-color: #ccc;
}

/* 调整其他元素的位置，避免重叠 */
.d-flex {
  margin-left: 30px;
}

注意：使用绝对定位时，需确保单元格有足够高度，或通过padding-bottom预留空间，防止内容溢出或重叠。

二、普通场景下的实现 #

非表格的普通块级容器中，实现方式更灵活，同样可以用Flex或Position属性解决。

方法1：Flex布局（推荐） #

Flex布局是现代CSS布局的首选方案，代码简洁且易于维护：

<!-- 普通场景示例HTML -->
<div class="parent-box">
  <div class="bottom-item">底部元素</div>
  <div class="content-item">
    <p>其他内容行1</p>
    <p>其他内容行2</p>
  </div>
</div>

.parent-box {
  display: flex;
  gap: 20px;
  align-items: flex-end; /* 所有子元素底部对齐 */
  min-height: 120px; /* 给容器设置最小高度，方便展示效果 */
  border: 1px solid #eee;
}

.bottom-item {
  width: 60px;
  height: 40px;
  background-color: #ccc;
}

• 若仅需单个元素底部对齐，给目标元素添加align-self: flex-end即可，无需修改父容器的align-items。

方法2：Position定位 #

适合需要精确控制位置的场景，但需处理好元素间的空间关系：

.parent-box {
  position: relative;
  min-height: 120px;
  border: 1px solid #eee;
  padding-left: 70px; /* 为绝对定位元素预留左侧空间 */
}

.bottom-item {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 60px;
  height: 40px;
  background-color: #ccc;
}

总结 #

两种场景都可以通过display: flex或position属性实现需求：

• Flex布局：更符合现代CSS规范，无需担心布局偏移和元素重叠，推荐优先使用；
• Position定位：适合特殊场景，但需要额外处理空间预留和重叠问题。

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