仅用一个元素将位置绝对元素内容对齐到底部

Question

我有一个绝对位置 div 元素，里面有文本内容，没有任何标签，像这样：

<div class="element">
    This is some content...
</div>


.element{
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    overflow: hidden;
    padding: 10px;
    color: white;
}

我想将该内容对齐到 div 的底部，但不使用更多 html 标签（如 this answer on a similiar question），以保持简单。

如何仅使用 css 实现此目的？

Answer 1

您可以通过 CSS flexbox 实现这一目标，如下所示：

.element {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  overflow: hidden;
  padding: 10px;
  color: red;
  background: green;
  display: flex;
  align-items: flex-end;
}

<div class="element">
  This is some content...
</div>

仅用一个元素将位置绝对元素内容对齐到底部

Align position absolute element content to bottom with only one element

html

css

element

alignment

vertical-alignment