问题；基线问题， 图片会和离得最近的图片基线对齐，图片的基线在图片底部，文字的基线在文字底部的上面一点点
只需要对文本设置顶部基线对齐即可
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .a { width: 100px; height: 100px; display: inline-flex; background-color: red; } img { width: 100%; height: 100%; background-color: blue; } .c { font-size: 12px; /* 文本设置顶部基线对齐 */ vertical-align: top; } </style> </head> <body> <div class="a"> <img src="https://yanxuan-item.nosdn.127.net/ea324a88d74978c5a11fe99ece5734ae.png" alt="" /> </div> <div class="a c">查看更多</div> </body> </html>
处理后
原文：https://www.cnblogs.com/fsg6/p/13685697.html