我正在尝试调整baseline中的某些文本div到所说的最底部边缘div（这样的角色就像g and j实际上会溢出 div）
我似乎只能将文本元素的底部边缘与文本元素的底部边缘对齐div。
我尝试过使用vertical-align有价值观baseline and bottom内部和外部元素，但没有成功。
div {
height: 80px;
width: 300px;
background: #ff5;
position: relative;
}
span {
font-size: 30px;
position: absolute;
left: 0;
bottom: 0;
}
<div>
<span>
TEST gjp ABC
</span>
</div>
我也希望能够offset从 div 底部开始的基线（例如bottom: 10px;定位文本的基线10px从 div 的底部边缘开始）。
Edit:我还应该提到的是，我想保留position: absolute;财产在span元素，因为我想在父级中自由定位多个元素div.
例如，在这里，A的基线应该位于 div 的底部边缘，B应该是10px在它上面和C's 20px:
div {
height: 80px;
width: 300px;
background: #ff5;
position: relative;
}
span {
font-size: 30px;
position: absolute;
left: 0;
bottom: 0;
}
<div>
<span style="left: 0px; bottom: 0px;">
A
</span>
<span style="left: 50px; bottom: 10px;">
B
</span>
<span style="left: 100px; bottom: 20px;">
C
</span>
</div>
Add a ::before具有 100% 高度的伪元素和display: inline-block;并用它来垂直对齐<span>到基线：
div {
height: 80px;
width: 300px;
background: #ff5;
position: relative;
}
div::before {
display: inline-block;
height: 100%;
content: '';
}
span {
font-size: 30px;
vertical-align: baseline;
}
<div>
<span>TEST gjp ABC</span>
</div>
您可以将相同的想法应用于跨度本身，但您必须声明跨度的高度：
div {
height: 80px;
width: 300px;
background: #ff5;
position: relative;
}
span {
display: inline-block;
font-size: 30px;
position: absolute;
left: 0;
bottom: 0;
height: 1em;
background: red;
}
span::before {
display: inline-block;
height: 100%;
vertical-align: baseline;
content: '';
}
<div>
<span style="left: 0px; bottom: 0px;">gjp</span>
<span style="left: 50px; bottom: 10px;">gjp</span>
<span style="left: 100px; bottom: 20px;">gjp</span>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
