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

在本文中，我们将介绍如何使用CSS将 div 元素的内容对齐到底部，这在网页布局设计中非常常见和有用。当我们需要将一些元素的内容对齐到底部时，我们可以使用不同的方法来实现。

阅读更多：CSS 教程

方法一：使用flex布局

CSS中的flex布局提供了一种简单、灵活的方式来控制元素的对齐方式。我们可以通过创建一个flex容器来实现内容对齐到底部的效果。

首先，将要对齐到底部的div元素设置为flex容器：

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

上述代码将创建一个高度为200像素的flex容器，并将其内部元素按列排列，并将其内容对齐到底部。我们只需要为容器设置justify-content: flex-end即可使内容对齐到底部。如果我们希望内容水平居中对齐，则可以将属性设置为justify-content: center。

接下来，在容器中添加需要对齐到底部的元素：

<div class="container">
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</div>

以上代码将创建一个包含三个div元素的容器，并将这三个 div 元素对齐到了底部。

方法二：使用绝对定位

另一种常用的方法是使用绝对定位来实现内容对齐到底部的效果。我们可以通过设置元素的上边距和底边距为auto，从而使其内容对齐到底部。

首先，将要对齐到底部的div元素的父元素设置为相对定位：

.container {
  position: relative;
  height: 200px;
}

接下来，将要对齐到底部的div元素设置为绝对定位，并指定其上边距和底边距为auto：

.bottom-align {
  position: absolute;
  bottom: 0;
  margin-top: auto;
}

以上代码将创建一个相对定位的父容器以及一个绝对定位的子元素。通过将子元素的底部位置设置为0，并将上边距设为auto，我们可以实现内容对齐到底部的效果。

最后，在容器中添加需要对齐到底部的元素：

<div class="container">
  <div class="bottom-align">Content 1</div>
  <div class="bottom-align">Content 2</div>
  <div class="bottom-align">Content 3</div>
</div>

以上代码将创建一个包含三个div元素的容器，并使这三个div元素的内容对齐到了底部。

方法三：使用表格布局

CSS中的表格布局也可以实现内容对齐到底部的效果。我们可以将div容器设置为表格布局，并将要对齐到底部的元素作为表格的单元格。

首先，将容器设置为表格布局：

.container {
  display: table;
  height: 200px;
}

接下来，将要对齐到底部的div元素设置为表格单元格：

.bottom-align {
  display: table-cell;
  vertical-align: bottom;
}

以上代码将创建一个表格布局的容器以及一个表格单元格元素。通过将表格单元格的垂直对齐方式设置为底部，我们可以实现内容对齐到底部的效果。

最后，在容器中添加需要对齐到底部的元素：

<div class="container">
  <div class="bottom-align">Content 1</div>
  <div class="bottom-align">Content 2</div>
  <div class="bottom-align">Content 3</div>
</div>