CSS -将div与其父div的底部对齐

CSS（层叠样式表）是一种用于描述网页样式的标记语言。它可以控制网页的布局、字体、颜色、背景等方面的样式。在前端开发中，CSS是必不可少的一部分。

将div与其父div的底部对齐，可以通过以下几种方式实现：

1. 使用flex布局：将父div设置为display: flex，并且设置flex-direction: column，这样子元素会按照垂直方向排列。然后将子div的margin-top设置为auto，这样子div会自动向上移动，与父div的底部对齐。

.parent {
  display: flex;
  flex-direction: column;
}

.child {
  margin-top: auto;
}

1. 使用绝对定位：将父div设置为相对定位（position: relative），子div设置为绝对定位（position: absolute），并且设置bottom: 0，这样子div会相对于父div的底部对齐。

.parent {
  position: relative;
}

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

1. 使用grid布局：将父div设置为display: grid，并且设置grid-template-rows为auto 1fr，这样子元素会按照网格布局排列。然后将子div的align-self设置为end，这样子div会自动向上移动，与父div的底部对齐。

.parent {
  display: grid;
  grid-template-rows: auto 1fr;
}

.child {
  align-self: end;
}

以上是三种常见的将div与其父div的底部对齐的方法。根据具体的需求和布局，选择适合的方法即可。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云CSS服务：腾讯云提供的CSS服务，可帮助用户快速构建、部署和管理网站的样式，提供丰富的样式库和样式管理工具，提升网站的用户体验和开发效率。