CSS 在主 Div 上使 Div 底部对齐

在本文中，我们将介绍如何使用 CSS 将一个 Div 元素底部对齐到主 Div 上。

阅读更多：CSS 教程

实现方法

要实现将 Div 底部对齐到主 Div 上，我们可以使用 Flexbox 或 Grid 来布局。这里我们将分别介绍这两种方法。

使用 Flexbox

Flexbox 是一种流式布局模型，可以很方便地控制其子元素的排列和对齐方式。

首先，我们需要将主 Div 设置为 Flex 容器。可以通过设置 display: flex; 来实现。接下来，我们可以使用 Flexbox 的属性来控制子元素的对齐方式。

如果我们想要将一个 Div 底部对齐到主 Div 上，可以将该 Div 的 margin-top: auto;。这样，该 Div 将会自动填充其与主 Div 之间的空间。

下面是一个使用 Flexbox 实现将 Div 底部对齐到主 Div 的示例：

<div class="main">
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.main {
  display: flex;
  flex-direction: column;
  height: 300px;
  border: 1px solid black;
}

.content {
  flex: 1;
  background-color: yellow;
}

.footer {
  background-color: blue;
  margin-top: auto;
}

在上面的示例中，.main 是主 Div，.content 是内容 Div，.footer 是底部 Div。使用 display: flex; 将主 Div 设置为 Flex 容器，然后通过设置 .footer 的 margin-top: auto; 来将其底部对齐到主 Div 上。

使用 Grid

Grid 是一种二维布局模型，可以非常灵活地控制元素的布局。

我们可以将主 Div 设置为 Grid 容器。首先，通过设置 display: grid; 来实现。然后，我们可以定义 Grid 的行和列。

如果我们想要将一个 Div 底部对齐到主 Div 上，我们可以让该 Div 放在最后一行。可以通过设置 .footer 的 grid-row: -1; 来实现。这样，该 Div 将会自动在最后一行，并填充其与主 Div 之间的空间。

下面是一个使用 Grid 实现将 Div 底部对齐到主 Div 的示例：

<div class="main">
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.main {
  display: grid;
  grid-template-rows: 1fr auto; /* 1fr 表示剩余空间 */
  height: 300px;
  border: 1px solid black;
}

.content {
  background-color: yellow;
}

.footer {
  background-color: blue;
  grid-row: -1;
}

在上面的示例中，.main 是主 Div，.content 是内容 Div，.footer 是底部 Div。使用 display: grid; 将主 Div 设置为 Grid 容器，然后通过设置 .footer 的 grid-row: -1; 来将其底部对齐到主 Div 上。

总结

本文介绍了如何使用 CSS 将一个 Div 底部对齐到主 Div 上。我们分别介绍了使用 Flexbox 和 Grid 两种方法实现这个效果。通过灵活运用这些布局模型的属性，我们可以轻松地控制子元素的排列和对齐方式，实现各种复杂的布局需求。希望本文能帮助你更好地理解和运用 CSS，实现各种独特的布局效果。