如何组织CSS实现搜索结果页图文对齐及高亮样式布局？

本文共计1022个文字，预计阅读时间需要5分钟。

图文字对齐问题本质上是容器内元素基线错位或盒模型计算混乱，如float。在现代布局中，flex更易控制。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 给结果项容器（如 .search-item）设 display: flex; align-items: flex-start;，避免默认的 align-items: baseline 拉偏文字
• 图片加 flex-shrink: 0; 防止小屏下被压缩变形
• 文字区域用 margin-left: 12px;（别用 padding）保持间距稳定，padding 会受父容器 box-sizing 影响
• 如果图片宽高不固定，务必加 min-width: 0; 到文字容器，否则长文本可能溢出或撑破布局

关键词高亮样式被截断或漏匹配？正则要处理边界和大小写

用户搜 “react”，结果里 “React Native” 或 “react-router” 只高亮了部分，甚至把 “reaction” 也标错了——这是没加词边界和忽略大小写的典型表现。