用 display: flex 最稳，它天然解决对齐、间距和换行问题；需设容器 flex + gap，图片加 flex: 1 和 max-width: 100%，小屏用 flex-wrap: wrap 响应式堆叠，并配 object-fit 与固定父高控图显。
用 display: flex 最稳，别碰 float 或 inline-block 的老方案
现代浏览器下，flex 是让三张图片横排最直接、最可控的方式。它天然处理对齐、间距和换行问题，不用算 margin 负值，也不用担心空白符占位。
常见错误是给图片加 float: left 后父容器没清除浮动，导致布局塌陷；或者用 inline-block 时被 HTML 中的换行符撑开间隙，调 font-size: 0 又容易误伤子内容。
- 把三张
<img alt="html5如何让三张图片排在一行" >包进一个容器（比如<div class="gallery">）<li>给容器加 <code>display: flex和gap: 8px（控制图片间距） - 可选：加
flex-wrap: nowrap防止小屏下意外换行 - 给每张
<img alt="html5如何让三张图片排在一行" >设flex: 1让它们等分空间，再配合max-width: 100% - 或者更明确地写
width: calc(33.333% - 6px)（减去 gap 占用），但需注意兼容性 - 避免只设
width: 33%—— 没考虑 border/margin/padding，容易错位 - 默认用
flex-wrap: wrap，让小屏自动折行（变成 3 行 1 列） - 用媒体查询在中屏（如
min-width: 768px）开启flex-wrap: nowrap - 如果真要保持三列，改用
grid+auto-fit更合适，但那是另一回事 - 给
<img alt="html5如何让三张图片排在一行" >加object-fit: cover（保持比例裁剪）或contain（完整显示但可能留白） - 必须给父容器（比如
<div>）设固定高度或 <code>min-height，否则object-fit无效 - 慎用
vertical-align—— 在 flex 布局里它不起作用
width 和 max-width 必须设，否则图片可能溢出或拉伸变形
默认情况下，<img alt="html5如何让三张图片排在一行" > 会按原始尺寸渲染，三张大图并排很容易撑破容器。光靠 flex 不解决缩放问题。
典型现象：在手机上看到横向滚动条，或某张图被拉宽成“胖图”。
立即学习“前端免费学习笔记（深入）”；
响应式断点要配 flex-wrap，不是所有设备都适合三图横排
小屏（比如 iPhone 竖屏）强行塞三张图，用户体验极差。这时候该换行为纵向堆叠，而不是缩小到看不清。
错误做法是只靠 width 百分比自适应，结果图片挤成一条细线；或者用 JavaScript 动态改 DOM，过度设计。
注意 object-fit 和父容器高度，否则图片裁剪或留白难控
三张图尺寸不一致时，横排后高度参差不齐，看起来很乱。很多人以为加个 height: 100% 就行，结果图片被拉伸失真。
错误现象：图片被压扁/拉长，或底部大片空白，或顶部被截掉一半。
实际排版细节比看起来多一层：图片加载异步、srcset 响应式源、alt 文本可访问性、focus-outline 是否被意外隐藏……这些不显眼的地方，往往才是上线后才发现的问题。
