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

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>