将文本对齐到div的底部

Question

我尝试将我的文本与其他文章和答案中的div底部对齐，以了解Stack
Overflow中的其他问题，并学会了使用不同的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折叠但宽度适合文本？

Answer 1

弹性解决方案

如果您想使用该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>

在上面的例子中，我们首先设置父元素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>