對齊位置絕對元素含量上下只有一個元素

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>