同一行内 不同字体大小的文本 底部对齐

2024年1月19日 208次阅读 来源: lumingkunn

核心思想是将每个大小的字体单独作为独立的行，单独设置line-height，而不是在同一行

HTML

<div class="a">
    <div class="b c"></div>
    <div class="b d"></div>
    <div class="b e"></div>
</div>

CSS

.a {
    display: flex;
    height: 40px;
}

.b {
    height: 100%
}

.c {
    font-size: 20px;
    line-height: 30px;
}

.d {
    font-size: 25px;
    line-height: 32px;
}

.e {
    font-size: 35px;
    line-height: 40px;
}

这样就解决了

    原文作者：lumingkunn
    原文地址: https://segmentfault.com/a/1190000019839151
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞