問題；基線問題， 圖片會和離得最近的圖片基線對齊，圖片的基線在圖片底部，文字的基線在文字底部的上面一點點
只需要對文本設置頂部基線對齊即可
<!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>
處理后
