在表格单元格中垂直对齐每个块 [英] Align each block vertically in table-cell

问题描述

我有1个parent table-cell .t 和2个子块 .ch1 和 .ch2 ：

I have 1 parent table-cell .t and 2 child blocks .ch1 and .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 （如果使用 vertical-align：bottom; code> .t 它会将两个块推到底部）

Is it possible to push .ch2 to bottom, but left .ch1 on top (if use vertical-align: bottom; of .t it will push both blocks to bottom)

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

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

推荐答案

Flexbox可以这样做：

Flexbox can do that:

.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>

这篇关于在表格单元格中垂直对齐每个块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！