有一些布局:
.block {
background: #aaa;
width: 300px;
height: 150px;
position: relative;
}
.contents {
position: absolute;
bottom: 0;
left: 10px;
line-height: 1;
font-size: 30px;
}
.contens > * {
vertical-align: baseline;
}
.content1 {
display: inline-block;
width: 20px;
height: 20px;
background: #000;
}
.content2 {
font-size: 45px;
}
<div class="block">
<div class="contents">
<span class="content1"></span>
<span class="content2">Foo</span>
<span class="content3">Bar</span>
</div>
</div>
如何使
.contents
的文本基线被推到.block
的底部而不管字体是什么?预期结果:
将
.contents
块下移bottom: -0.1em;
不合适,因为字体的基准线级别不同。 最佳答案
将行高更改为0,添加了溢出:隐藏
.block {
background: #aaa;
width: 300px;
height: 150px;
position: relative;
overflow:hidden;
}
.contents {
position: absolute;
bottom: 0;
left: 10px;
line-height:0;
font-size: 30px;
}
.contents > * {
vertical-align: baseline;
}
.content1 {
display: inline-block;
width: 20px;
height: 20px;
background: #000;
}
.content2 {
font-size: 45px;
}
<div class="block">
<div class="contents">
<span class="content1"></span>
<span class="content2">Foo</span>
<span class="content3">Bar</span>
</div>
</div>
关于html - 如何将文本基线推到父块的底部?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36054479/