首选flex布局，设display: flex和align-items: center实现并排垂直居中；inline-block需配合vertical-align: middle；float已不推荐用于布局；图片加载失败时应设宽高并用JS兜底。
图片和文字怎么并排显示不换行
默认情况下，<img> 是行内元素，但会因父容器宽度、浮动或 display 设置导致文字被挤到下一行。最直接的解法是让图片和相邻文字处于同一行流中，且不触发块级换行。
推荐用 display: inline-block 或 display: flex，避免老式 float 带来的清除浮动麻烦：
<div style="display: flex; align-items: center;"> <img src="icon.png" width="24" height="24" alt="icon"> <span style="margin-left: 8px;">这是一段说明文字</span> </div>
-
flex方案兼容性好（IE10+），align-items: center自动垂直居中，无需计算 line-height - 不用
vertical-align配合inline-block，省去基线对齐的坑 - 若需响应式缩放，给
<img>加max-width: 100%; height: auto;，否则在小屏上可能溢出
文字环绕图片怎么做（左图右文 / 右图左文）
这是传统“图文混排”最常指的场景，本质是让文字流绕过图片区域。CSS 的 float 仍是目前最可靠、语义清晰的方案，比 shape-outside 兼容性高得多。
左图右文示例：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
<img src="thumb.jpg" alt="缩略图" style="float: left; margin-right: 12px; width: 120px;"> <p>这里是多行正文……浏览器会自动绕开左侧浮动的图片区域。</p>
- 必须给图片设明确宽度，否则
float后文字可能紧贴图片边缘、阅读困难 - 记得加
margin（如margin-right或margin-left）留出呼吸空间，不然文字贴太近 - 后续内容若需“清浮”，在下一个块级元素上加
clear: both，或用伪元素::after清除（避免 DOM 污染）
为什么 <img> 加了 vertical-align 还是没对齐
因为 vertical-align 只对行内元素或表格单元格生效，且是对齐**基线（baseline）**，不是视觉中心。常见现象：图片下方多出几像素空白——那是基线预留的 descender 空间（如字母 g、y 的下延部分）。
- 最简修复：
vertical-align: top、middle或bottom，优先选top或middle - 更彻底的解法：把
<img>设为display: block，再用margin或flex控制位置，完全脱离行内布局逻辑 - 别对
flex容器里的<img>再设vertical-align——它无效，align-items才管用
响应式图文混排要注意什么
在移动设备上，强行并排或环绕会挤占文字宽度、降低可读性。不能只靠 CSS 媒体查询“缩放”，而要重新组织流式结构。
- 小屏优先：默认用上下结构（图片在上，文字在下），大屏再用
flex或float并排 - 用
@media (min-width: 768px)触发并排，而不是max-width，避免断点冲突 - 图片加载失败时，
alt文本应有意义；若仅作装饰，用空alt=""，避免屏幕阅读器误读 - 不要用
width: 100%+height: 200px强制拉伸图片——会变形；改用object-fit: cover或contain
复杂点在于：图文关系不是纯样式问题，而是语义与布局的耦合。比如新闻卡片里“图+标题+摘要”，应该用 <figure> 和 <figcaption> 明确包裹，而不是一堆 <div> 堆砌——否则无障碍和 SEO 都会吃亏。
