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

我有一个position absolute 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;
}

这是一些内容。。。
.元素{
位置：绝对位置；
顶部：10px；
左：10px；
右：10px；
底部：10px；
溢出：隐藏；
填充：10px；
颜色：白色；
}

我想将内容与div的底部对齐，但不使用更多的html标记（如），以保持简单

---

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

您可以使用css实现此目标，如下所示：

<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;
}

.element{
位置：绝对位置；
顶部：10px；
左：10px；
右：10px；
底部：10px；
溢出：隐藏；
填充：10px；
颜色：红色；
背景：绿色；
显示器：flex；
对齐项目：柔性端；
}

这是一些内容。。。

没错，我完全忘记了flex。最近的浏览器支持情况如何？微软已经停止了对古老IE浏览器的支持，所以这几天真的很好：）-谢谢你的回答：）很感激如果你想要更多的兼容性，你可以看看这个github：）