将文本对齐到div的底部
我试图对齐我的文本从其他职位的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解决方案
如果您想要使用display: table-cell
解决方案,那就太好了。 但是,我们有一个更好的方式来实现相同的使用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>
链接地址: http://www.djcxy.com/p/75789.html