底部對齊父 div 內的 2 個 div（同時將一個子 div 保持在另一個孩子的頂部）

Question

我有 3 個 div：

<div class="parent"> 
  <div class="child1"> </div>
  <div class="child2"> </div>
</div>

CSS：

.parent {
  height: 500px;
  width: 500px;
  position: relative;
}

.child1, .child2 {
  height: 100px;
  width: 100px;
}

我需要對齊child2格是在底部.parent格，而child1格應該是在上面child2格。

因此， child1和child2都應該與父 div 底部對齊，但child1應該在child2之上。

我怎樣才能做到這一點？ 如果只有一個子 div - 可以通過設置position: absolute; bottom:0來實現position: absolute; bottom:0 position: absolute; bottom:0 ，但我不知道是否有 2 個子 div，一個子 div 應該在另一個之上。

Answer 1

您可以在使用Flexbox的.parent ，並應用以下樣式：

.parent {
  /* Introduce Flexbox */
  display: flex;

  /* Establishes the y-axis as the main axis.
     This displays the children from top to bottom */
  flex-direction: column;

  /* Packs the children from the end of the main axis */
  justify-content: flex-end;
}

 .parent { height: 500px; width: 500px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid black; } .child1, .child2 { height: 100px; width: 100px; } .child1 { background: red; } .child2 { background: blue; }

 <div class="parent"> <div class="child1"> </div> <div class="child2"> </div> </div>