在表格单元格中垂直对齐每个块答案

【问题标题】：Align each block vertically in table-cell在表格单元格中垂直对齐每个块
【发布时间】：2025-12-09 18:00:01
【问题描述】：

我有 1 个父表格单元 .t 和 2 个子块 .ch1 和 .ch2：

HTML：

<div class="t">
    <div class="ch1">1</div>
    <div class="ch2">2</div>
</div>

CSS：

.t {
    display: table-cell;
    background-color:green;
    height:200px;
    width:200px;
}

.ch1 {
    background-color:blue;
    display: block;
}

.ch2 {
    background-color:red;
    display: block;
}

是否可以将.ch2 推到底部，但将.ch1 留在顶部（如果使用.t 中的vertical-align: bottom;，它会将两个块都推到底部）

JSFiddle： https://jsfiddle.net/hvz4cn69/

【问题讨论】：

标签： html css block vertical-alignment tablecell

【解决方案1】：

Flexbox 可以做到这一点：

.t {
  display: flex;
  flex-direction: column;
  background-color: green;
  height: 200px;
  width: 200px;
  justify-content: space-between;
}
.ch1 {
  background-color: blue;
  display: block;
}
.ch2 {
  background-color: red;
  display: block;
}

<div class="t">
  <div class="ch1">1</div>
  <div class="ch2">2</div>
</div>

或者

.t {
  display: flex;
  flex-direction: column;
  background-color: green;
  height: 200px;
  width: 200px;
}
.ch1 {
  background-color: blue;
  display: block;
}
.ch2 {
  background-color: red;
  display: block;
  margin-top: auto;
}

<div class="t">
  <div class="ch1">1</div>
  <div class="ch2">2</div>
</div>

【讨论】：

谢谢，它有效，并且是对问题的回答。但是将 table-cell 替换为 flex 会有所不同（实际上我有更复杂的情况，但我在有问题时对其进行了简化以使其更清晰jsfiddle.net/hvz4cn69/1）。问题是 flex 本身适合最小高度，而表格单元格的高度是表格中最大表格单元格的高度：snag.gy/z9xql.jpg。结果我想要snag.gy/vV14L.jpg
谢谢，原来如此，看来flex是个很厉害的东西，我要好好学习一下
确实，flexbox 很棒。

【解决方案2】：

您可以将margin-top: 164px; 用于ch2

【讨论】：