Question

我正在努力解决一个似乎应该可以使用CSS解决的问题 - 它在概念上很简单，而且我假设一个相对常见的问题，但目前如何实现它是我的目标！

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

这是我尝试相对于文本顶部定位失败的JSFiddle。

CSS：

html, body, l-container {
  width:100%;
  height:100%;
}

.l-container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;    
}

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

HTML：

<body>
  <div class="l-container">
    <div class="caption">Multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multilinemultilinemultilinemultiline
    </div>
  </div>
</body>

有人知道这是否可以在纯CSS中实现？我宁愿不用JS来布局，但是这个问题让我把头发撕掉了。

Answer 1

如果您设置bottom: 0并省略任何top样式，绝对定位的div应该会展开。

Answer 2

正如您在问题中提到的，听起来您需要绝对定位。您的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;
}

查看此处的示例： http://jsfiddle.net/be73v/1/

在不相关的说明中，我建议您添加“margin：0; padding：0;”到你的“html，body，l-container”css中删除不必要的滚动条。

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

2 个答案: