要让文字显示在 <div> 的最底部，你可以使用 CSS 中的定位或弹性布局来实现。以下是几种常见的实现方式：
方法一：使用 Flexbox
<style>
.container {
display: flex; /* 启用 Flexbox */
flex-direction: column; /* 垂直排列子元素 */
height: 200px; /* 设置容器高度 */
border: 1px solid #ccc;
}
.text-at-bottom {
margin-top: auto; /* 将元素推到底部 */
}
</style>
<div class="container">
<p class="text-at-bottom">这段文字会显示在容器底部</p>
</div>
方法二：使用绝对定位
<style>
.container {
position: relative; /* 为绝对定位的子元素提供参考 */
height: 200px; /* 设置容器高度 */
border: 1px solid #ccc;
}
.text-at-bottom {
position: absolute; /* 绝对定位 */
bottom: 0; /* 距离底部 0 */
left: 0; /* 居左对齐 */
right: 0; /* 居右对齐 */
margin: 0; /* 移除默认边距 */
padding: 10px; /* 添加内边距 */
}
</style>
<div class="container">
<p class="text-at-bottom">这段文字会显示在容器底部</p>
</div>
方法三：使用 Grid 布局
<style>
.container {
display: grid; /* 启用 Grid 布局 */
height: 200px; /* 设置容器高度 */
border: 1px solid #ccc;
}
.text-at-bottom {
align-self: end; /* 垂直方向底部对齐 */
}
</style>
<div class="container">
<p class="text-at-bottom">这段文字会显示在容器底部</p>
</div>
方法四：使用表格布局
<style>
.container {
display: table-cell; /* 模拟表格单元格 */
height: 200px; /* 设置容器高度 */
vertical-align: bottom; /* 垂直底部对齐 */
border: 1px solid #ccc;
padding: 10px;
}
</style>
<div class="container">
这段文字会显示在容器底部
</div>
推荐方案（响应式）
如果需要响应式设计且内容可能动态变化，推荐使用 Flexbox 或 Grid 方案，它们更灵活且易于维护。
