将文本alignment到div的底部

我试图alignment我的文本从其他职位的div的底部和答案在stackoverflow我学会了处理这与不同的CSS属性。 但是我无法完成。 基本上我的html代码是这样的:

 <div style='height:200px; float:left; border:1px solid #ff0000; position:relative;'> <span style='position:absolute; bottom:0px;'>A Text</span> </div> 

效果是,在FF中我只是得到垂直线(div在一个崩溃的方式)和文字被写在旁边。 我怎样才能防止div崩溃,但宽度适合文本?

Flex解​​决scheme

如果您想要使用display: table-cell解决scheme,那就太好了。 但是,不要黑客,我们有一个更好的方式来实现相同的使用display: flex;flex是有一个体面的支持 。

 .wrap { height: 200px; width: 200px; border: 1px solid #aaa; margin: 10px; display: flex; } .wrap span { align-self: flex-end; } 
 <div class="wrap"> <span>Align me to the bottom</span> </div> 

您现在可以使用Flexbox justify-content: flex-end来做到这一点justify-content: flex-end now:

 div { display: flex; justify-content: flex-end; align-items: flex-end; width: 150px; height: 150px; border: solid 1px red; } 
 <div> Something to align </div>