如何使用 CSS 将 div 的内容对齐到底部？

在 Web 开发中，经常需要将 div 元素的内容对齐到底部。本文将介绍几种实现方法。

方法一：使用绝对定位

可以通过将 div 内部元素设置为绝对定位来实现底部对齐：

.parent {
  position: relative;
}
.child {
  position: absolute;
  bottom: 0;
}

这里，父元素需要设置为相对定位，而子元素则需要设置为绝对定位，并将其 bottom 属性设置为 0。

方法二：使用 Flexbox 布局

如果你使用 CSS3 的 Flexbox 布局，可以通过设置 align-items 属性为 flex-end 来实现底部对齐：

.parent {
  display: flex;
  align-items: flex-end;
}

这里，父元素需要设置为 flex 容器，并将其 align-items 属性设置为 flex-end。

方法三：使用 Grid 布局

如果你使用 CSS3 的 Grid 布局，可以通过设置 align-self 属性为 end 来实现底部对齐：

.parent {
  display: grid;
}
.child {
  align-self: end;
}

这里，父元素需要设置为 grid 容器，而子元素则需要将其 align-self 属性设置为 end。

方法四：使用 table 布局

使用 table 布局不是很推荐，但如果你需要适配旧浏览器，可以像下面这样实现：

.parent {
  display: table;
  height: 100%;
  width: 100%;
}
.child {
  display: table-cell;
  vertical-align: bottom;
}

这里，父元素需要设置为 table 布局，而子元素则需要设置为 table-cell，并将其 vertical-align 属性设置为 bottom。

除此之外，还可以使用 JavaScript 或 jQuery 等工具来实现底部对齐。但如果你使用了上述方法，就可以免去 JavaScript 的引入和执行，从而提高页面性能。

以上就是本文介绍的几种实现方法。根据具体需求和兼容性要求，你可以选择其中一种或多种方法来实现底部对齐。