Html 如何相对于最后一行的底部绝对定位多行文本块？

我正在努力解决一个似乎应该用CSS解决的问题——它在概念上很简单，我假设这是一个相对常见的问题，但如何实现它目前我还不知道

我有一个跨越100%宽度和100%高度的容器，我需要绝对定位一个具有可变行数的文本块，以便文本块的底线底部位于容器中的固定垂直位置。我似乎只能相对于文本的顶部来定位它，这是不好的，因为当有更多行时，它有时会溢出容器

这是我在相对于文本顶部定位时失败的一次尝试

CSS:

HTML:

多行多行多行多行多行多行多行多行多行多行多行多行多行多行多行多行多行多行多行多行多行

---

有人知道这在纯CSS中是否可以实现吗？我不想在布局中使用JS，但这个问题让我毛骨悚然。

如果您设置

底部：0

并省略任何

顶部

样式，绝对定位的div应该向上扩展。

正如您在问题中提到的，听起来您需要绝对定位。您的CSS仅显示相对位置

替换此CSS：

.caption {
  position: relative;
  width: 360px;
  margin-left: -180px;
  left: 50%;
  top: 82%;
  text-align: center;
}

……关于这一点：

.caption {
  position: absolute;
  width: 360px;
  margin-left: -180px;
  left: 50%;
  bottom: 0;
  text-align: center;
}

请参见此处的示例：

另外，我建议您在“html，body，l-container”css中添加“margin:0；padding:0；”，以删除不必要的滚动条

.caption {
  position: relative;
  width: 360px;
  margin-left: -180px;
  left: 50%;
  top: 82%;
  text-align: center;
}

.caption {
  position: absolute;
  width: 360px;
  margin-left: -180px;
  left: 50%;
  bottom: 0;
  text-align: center;
}