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

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>