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

核心思想是将每个大小的字体单独作为独立的行,单独设置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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞