gpt4 book ai didi

html - 如何相对于最后一行的底部绝对定位多行文本 block ?

转载 作者:太空宇宙 更新时间:2023-11-04 13:59:52 25 4
gpt4 key购买 nike

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

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

这是一个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 进行布局,但这个问题让我抓狂。

最佳答案

如果您设置 bottom: 0 并省略任何 top 样式,则绝对定位的 div 应该向上扩展。

关于html - 如何相对于最后一行的底部绝对定位多行文本 block ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21591270/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com