文字显示在div 最下面，css怎么写

要让文字显示在 <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 方案，它们更灵活且易于维护。