Question

我有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保留在最前面（如果vertical-align: bottom;使用.t它会将两个块推到底部）

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

Answer 1

Flexbox可以做到这一点：

＆＃13;

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

＆＃13;

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

＆＃13;

或者

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

2 个答案: