将文本与 div 的底部对齐

Question

我尝试将我的文本与 Stack Overflow 中其他帖子和答案中的 div 底部对齐，我学会了使用不同的 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; vertical-align: bottom; 足够

 div { display: table-cell; vertical-align: bottom; border: 1px solid #f00; height: 100px; width: 100px; }

 <div>Hello</div>

（或 JSFiddle）

Answer 2

你现在可以用 Flexbox 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>

咨询您的 Caniuse ，看看 Flexbox 是否适合您。