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

当我们需要将一个 div 元素定位在其容器的底部时，可以使用 CSS 来实现。以下介绍几种不同的方法。

方法一：使用定位属性

我们可以通过将 position 属性设置为 absolute 或 fixed，并将 bottom 属性设置为 0，让 div 元素定位在其容器的底部。具体代码如下：

.container {
  position: relative;
}

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

注意，使用该方法需要将其容器的 position 属性设置为 relative，否则 div 元素将相对于父级的根元素进行定位。

方法二：使用 flex 布局

我们可以使用 flex 布局来让一个容器的子元素沿着主轴方向上的底部对齐。具体代码如下：

.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

我们需要将容器的 display 属性设置为 flex，flex-direction 属性设置为 column，然后将 justify-content 属性设置为 flex-end。

方法三：使用网格布局

我们可以使用网格布局来将元素定位在其容器的底部。具体代码如下：

.container {
  display: grid;
  height: 100%;
}

.bottom-div {
  grid-row: 2;
}

我们需要将容器的 display 属性设置为 grid，height 属性设置为 100%，然后将 grid-row 属性设置为 2。

以上是我介绍的三种方法，根据实际需求，选择相应的方法即可实现在其容器底部定位 div 元素。