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

<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>

<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>