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

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>