如何设置 div 标签内的多个 div 子标签，底部对齐

原创于 2024-11-28 11:05:51 发布 · 1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

要让 div 标签内的子标签底部对齐，通常可以通过使用 CSS 中的 Flexbox 或 Grid 布局来实现。这两种方式都能够方便地控制子元素的对齐方式。

方法 1：使用 Flexbox 布局

Flexbox 是一个非常强大的布局工具，它可以让子元素沿着容器的主轴或交叉轴对齐。要使子元素底部对齐，设置容器为 display: flex，并使用 align-items: flex-end。

示例代码：

<div class="container">
  <div class="child">子元素 1</div>
  <div class="child">子元素 2</div>
  <div class="child">子元素 3</div>
</div>

.container {
  display: flex;              /* 启用 Flexbox */
  align-items: flex-end;      /* 子元素底部对齐 */
  height: 200px;              /* 设置容器高度 */
  border: 1px solid #000;     /* 方便查看容器边界 */
}

.child {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

解释：

display: flex;：启用 Flexbox 布局。
align-items: flex-end;：将子元素沿交叉轴（垂直方向）对齐到底部。
设置容器的 height 属性来确保有足够的高度进行对齐。

方法 2：使用 Grid 布局

CSS Grid 也是一个非常强大的布局系统，可以通过简单的设置让子元素在容器内对齐到底部。

示例代码：

<div class="container">
  <div class="child">子元素 1</div>
  <div class="child">子元素 2</div>
  <div class="child">子元素 3</div>
</div>

.container {
  display: grid;            /* 启用 Grid 布局 */
  align-items: end;         /* 子元素底部对齐 */
  height: 200px;            /* 设置容器高度 */
  border: 1px solid #000;   /* 方便查看容器边界 */
}

.child {
  width: 50px;
  height: 50px;
  background-color: lightcoral;
  margin: 5px;
}

解释：

display: grid;：启用 Grid 布局。
align-items: end;：将所有子元素沿交叉轴（垂直方向）对齐到底部。
和 Flexbox 布局一样，设置容器的 height 属性来确保有足够的空间进行对齐。

方法 3：使用绝对定位

如果你不想使用 Flexbox 或 Grid 布局，也可以通过绝对定位来让子元素底部对齐。将父元素设置为 relative，并将子元素设置为 absolute，然后通过 bottom 属性将子元素对齐到底部。

示例代码：

<div class="container">
  <div class="child">子元素 1</div>
  <div class="child">子元素 2</div>
  <div class="child">子元素 3</div>
</div>

.container {
  position: relative;   /* 设置父容器为相对定位 */
  height: 200px;        /* 设置容器高度 */
  border: 1px solid #000;
}

.child {
  position: absolute;  /* 子元素绝对定位 */
  bottom: 0;           /* 子元素底部对齐 */
  width: 50px;
  height: 50px;
  background-color: lightgreen;
}