如何将文本基线推到父块的底部？
精巧
有一些布局：
.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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何将页脚推到页面底部
- 2
如何将文本与 XSL-FO 块的底部对齐？
- 3
如何将UILabel的基线与UIImageView的底部对齐？
- 4
如何将包含的布局推到屏幕底部？
- 5
CSS Grid如何将项目推到底部然后再推到左侧
- 6
如何将 html 部分推到顶部将容器推到屏幕底部
- 7
将文本基线对齐到div的底部
- 8
如何将元素与父对象的底部对齐并适合文本内容
- 9
如何在父块底部挤压块？
- 10
如何将绝对定位元素推到底部而不重叠
- 11
如何将文本块与属性绑定
- 12
如何将图像推到每个菜单项块的右侧
- 13
Mongoose / MongoDB-如何将新的数组元素推到正确的父数组元素上
- 14
CSS：如何将文本与高度调整后的输入元素的基线对齐？
- 15
显示内联块。如何防止将块推到新行？
- 16
如何将for循环推到numpy
- 17
如何将“ val”的价值推到底？
- 18
Word - 如何将文本粘贴到页面底部
- 19
如何将菜单文本居中（边框底部）
- 20
将文本块对齐到页面底部
- 21
将页脚推到页面底部
- 22
文本块不覆盖在父Div的实际底部
- 23
如何将元素添加到文本块？
- 24
如何将文本块动态添加到页面？
- 25
如何将文本与行内块元素垂直居中对齐
- 26
如何将元素显示为带有文本的块？
- 27
如何将文本附加到 SVG 中的父级？
- 28
如何将文本与父对齐小部件的中心对齐
- 29
如何将字形与Freetype沿基线对齐？
我来说两句