如何用CSS让文字居于div的底部

在 CSS 中，可以使用多种方法来让文字居于 div 的底部。下面提供两种常见的方法，包括示例说明和代码实现。

方法一：使用 flexbox 布局

可以使用 CSS 的 flexbox 布局来实现让文字居于 div 的底部。具体方法是将父元素的 display 属性设置为 flex，然后设置 flex-direction 属性的值为 column，这样就可以让子元素按照列的方向排列。接着，将子元素的 margin-top 属性设置为 auto，这样就可以让子元素自动向上对齐，从而实现让文字居于 div 的底部。

<div class="container">
  <div class="content">
    <p>这是一段文字</p>
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
  height: 200px;
  border: 1px solid black;
}

.content {
  margin-top: auto;
}

上述代码中，使用了 flexbox 布局来实现让文字居于 div 的底部。将父元素的 display 属性设置为 flex，然后设置 flex-direction 属性的值为 column，这样就可以让子元素按照列的方向排列。接着，将子元素的 margin-top 属性设置为 auto，这样就可以让子元素自动向上对齐，从而实现让文字居于 div 的底部。

方法二：使用绝对定位

可以使用 CSS 的绝对定位来实现让文字居于 div 的底部。具体方法是将父元素的 position 属性设置为 relative，然后将子元素的 position 属性设置为 absolute，再将子元素的 bottom 属性设置为 0，这样就可以让子元素相对于父元素的底部对齐，从而实现让文字居于 div 的底部。

<div class="container">
  <div class="content">
    <p>这是一段文字</p>
  </div>
</div>

.container {
  position: relative;
  height: 200px;
  border: 1px solid black;
}

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

上述代码中，使用了绝对定位来实现让文字居于 div 的底部。将父元素的 position 属性设置为 relative，然后将子元素的 position 属性设置为 absolute，再将子元素的 bottom 属性设置为 0，这样就可以让子元素相对于父元素的底部对齐，从而实现让文字居于 div 的底部。