如何使用 CSS 将 div 定位在其容器的底部？

有时候我们需要将一个 div 元素定位在其容器的底部。下面介绍几种实现方法。

使用绝对定位

使用绝对定位和 bottom 属性，将 div 定位在容器底部。

.container {
  position: relative;
  height: 200px; /* 容器高度 */
}

.bottom-div {
  position: absolute;
  bottom: 0;
}

注意：父容器需要设置 position: relative;，这样设置 bottom 值才会以父元素为参照物。

使用 flexbox 布局

使用 flexbox 布局，将 div 元素放在容器底部。

.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 200px; /* 容器高度 */
}

.bottom-div {
  flex-shrink: 0;
}

注意：父容器需要设置 display: flex; 和 flex-direction: column;。通过 justify-content: flex-end; 将子元素定位在底部。flex-shrink: 0; 防止子元素收缩。

使用 grid 布局

使用 grid 布局，将 div 元素放在容器底部。

.container {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 200px; /* 容器高度 */
}

.bottom-div {
  align-self: end;
}

注意：父容器需要设置 display: grid; 和 grid-template-rows: auto 1fr;，通过 align-self: end; 将子元素定位在底部。

以上是几种常见的实现方法。根据实际需求选择合适的方法即可。