Html 从div底部对齐文本

我需要将div中的一些文本与div底部对齐，并留有一定的间距。如何设置div底部与文本之间的间距（例如10或20px）

以下是示例代码：

.moduleText{
高度：50px；
宽度：300px；
背景：红色；
填充顶部：自动；
填充底部：17px；
}

---

示例文本

1th:使用

行高

line-height: 5cm;

.modultext span {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.modultext span {
    padding-top: 70px;
    display: block;
    padding-left: 10px;
}

---

2th：使用

absolute

line-height: 5cm;

.modultext span {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.modultext span {
    padding-top: 70px;
    display: block;
    padding-left: 10px;
}

line-height: 5cm;

.modultext span {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.modultext span {
    padding-top: 70px;
    display: block;
    padding-left: 10px;
}

---

3次：使用

Padding

line-height: 5cm;

.modultext span {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.modultext span {
    padding-top: 70px;
    display: block;
    padding-left: 10px;
}

---

您可以将

表格单元格

布局与

垂直对齐

属性一起使用：

line-height: 5cm;

.modultext span {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.modultext span {
    padding-top: 70px;
    display: block;
    padding-left: 10px;
}

.moduleText{
显示：表格单元格；
垂直对齐：底部对齐；
高度：50px；
宽度：300px；
背景：红色；
填充底部：17px；
}

---

示例文本

一种方法是使用

行高

作为div高度的两倍。这将始终将文本设置为div的底部

.moduleText{
高度：50px；
线高：100px；
宽度：300px；
背景：红色；
填充顶部：自动；
填充底部：17px；
}

---

示例文本

您必须添加一个跨距来覆盖文本

这是我的评论

风格：

.modultext{
  height: 50px;
  width: 300px;
  background: red;
  overflow: hidden;
  position: relative;
}
span{
  position: absolute;
  bottom: 0px;
  padding-bottom: 17px;
}

HTML:

<div class="modultext"><span>Sample text</span></div>

示例文本

yo可以使用

position:absolute

和

bottom:15px

.moduleText{float:left}将其添加到填充底部下方