弹性解决方案
如果您想使用该
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 > <span>Align me to the bottom</span></div>在上面的例子中，我们首先设置父元素
display: flex;和后来，我们使用
align-self到
flex-end。这可以帮助您将项目推送到
flex父项的末尾。
旧解决方案（如果您不愿意使用，则有效flex
）
如果要将文本对齐到底部，则不必为此编写太多属性，使用
display: table-cell;with
vertical-align:bottom;就足够了
div { display: table-cell; vertical-align: bottom; border: 1px solid #f00; height: 100px; width: 100px;}<div>Hello</div>
