場(chǎng)景描述:主標(biāo)題和副標(biāo)題在同一行肌蜻,且文字以字體底部對(duì)齊拼余。
效果如下:
image.png
解決方案:
【HTML】
<div class="container">
<div class="main_title">主文字</div>
<div class="subtitle">副文字</div>
</div>
【CSS】
.container {
display: flex;
align-items: baseline;
}
簡(jiǎn)單說明【MDN】
baseLine
所有元素向基線對(duì)齊。側(cè)軸起點(diǎn)到元素基線距離最大的元素將會(huì)于側(cè)軸起點(diǎn)對(duì)齊以確定基線。
簡(jiǎn)單來說照雁,就是設(shè)置一下 baseline就可以了