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

我有一个父表单元格

.t

和两个子块

.ch1

和

.ch2

：

HTML:

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

.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
的
将两个块推到底部）

JSFiddle：
Flexbox可以做到：


.t{
显示器：flex；
弯曲方向：立柱；
背景颜色：绿色；
高度：200px；
宽度：200px；
证明内容：之间的空间；
}
.ch1{
背景颜色：蓝色；
显示：块；
}
.ch2{
背景色：红色；
显示：块；
}

1.
2.
您可以使用
页边距顶部：164px对于
ch2
谢谢，它可以工作，并且是问题的答案。但将表格单元格替换为flex会有一些不同（实际上我有更复杂的情况，但我对它进行了简化以使其更清晰）。问题是flex本身适合最小高度，而表格单元格采用表格中最大表格单元格的高度：。结果我想要感谢，正是它，似乎flex是非常强大的东西，我需要学习所有关于它的知识，flexbox是很棒的。