大佬教程收集整理的这篇文章主要介绍了css – 将弹性框项目与块中最后一行文本的基线对齐，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
从我看到的,对齐项目：基线;当块只有1行时,属性很好.
属性align-items：flex-end;创建一些问题@R_674_9216@左右项具有不同的字体大小和行高.虽然项目的边缘是对齐的,但是当项目没有边框时,由字体大小和行高差异创建的空白区域看起来非常糟糕.
我试图在没有任何JS的情况下找到一个好的全方位解决方案.
提前致谢.
.flex { display: flex; align-items: baseline; } .inline-block { display: inline-block; } .item { border: 1px solid red; } .item:first-child { font-size: 200%; } .flex::after { content: ''; position: absolute; left: 0; right: 0; border-top: 1px solid blue; }
<div class="flex">
<div class="item">
<div class="inline-block">Lorem<br />Ipsum<br />Dolor</div>
</div>
<div class="item">
<div class="inline-block">Foo bar</div>
</div>
</div>
这将是有效的,因为根据CSS 2.1,
以上是大佬教程为你收集整理的css – 将弹性框项目与块中最后一行文本的基线对齐全部内容，希望文章能够帮你解决css – 将弹性框项目与块中最后一行文本的基线对齐所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。