Html 将文本放置在块元素的底部

鉴于以下情况，如何将文本

foo

放置在块

div

元素的底部

<div style="width:100px; height:100px">foo</div>

foo

将其放在一个单独的元素中：

position:absolute;
bottom:0;

并给父级

位置：relative

，以建立新的定位上下文

---

.

试着玩一下漂亮现代的

弹性盒

：

<div style="width:100px; height:100px; display: flex; align-items: flex-end;">foo</div>

我知道这种方法不是100%支持的，而是即将出现的大量答案中的又一个补充。

---

此外，我不会考虑那些日子的IE8。

您添加了

display:table cell

和

vertical align:bottom

：

div{
显示：表格单元格；
垂直对齐：底部对齐；
背景：红色；
}

---

foo

是否可以将文本包装到另一个元素中？如果不是，我不确定这是否可行。我宁愿不这样做，但如果必须的话，我会这样做。请记住，这个示例在中不起作用。问题中的DOM创建的实际DOM是什么？文本

foo

在

div

中创建一个隐式文本节点，对吗？我想

flex-box

可以让我们控制这个隐式节点吗？@Ben：它只是一个带有CDATA的元素，flex-box只控制其内容的布局方式（在本例中是“推到容器的垂直端”）。CDATA是否对应于DOM树中的一个单独节点？不，它不是一个节点，而是一种特定的元素类型。不过，这并不是真正的主题。

.myDiv {
  width:100px;
  height:100px;
  display: flex;
  align-items: flex-end;
}