广告图横向排列首选display: flex，因其天然支持水平排列、自动对齐与间隙控制，避免float导致的父容器塌陷和布局错位；需配合flex-wrap: wrap、object-fit: cover及固定容器尺寸确保响应式稳定。

广告图用 display: flex 最稳，别碰 float

横向广告并列排布，首选 display: flex。它天然支持水平排列、自动对齐、间距控制，且不会像 float 那样导致父容器塌陷或后续内容错位。

常见错误是只给广告 img 加 float: left，却没在父容器加 overflow: hidden 或伪类清除，结果广告“消失”或页面布局全乱。

• 把所有广告图包进一个 <div class="ad-banner"> 容器里 <li>给该容器加 <code>display: flex 和 gap: 8px（别用 margin，易合并）
• 每张广告图设 flex: 0 0 auto（不缩放、不增长、按原始宽高显示）
• 若需等宽平分，改用 flex: 1 并统一设 max-width，避免大图撑爆容器

图片宽度不一致？用 object-fit: cover 统一裁切

广告图原始尺寸五花八门，直接并排会出现高度参差、基线错位、留白难控——这不是布局问题，是图片渲染问题。

width: 100% + height: 120px 强制拉伸会变形；height: auto 又让高度随图浮动。真正解法是固定容器尺寸 + 裁剪填充。

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


财经HTML高端海报生成
复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
下载
• 给每个广告图外层套一个 <div class="ad-item">，设固定宽高（如 <code>width: 240px; height: 120px）
• 广告图本身设 width: 100%; height: 100%; object-fit: cover;
• 加上 vertical-align: top（即使不用 inline-block，也能防基线干扰）

响应式断点下广告自动换行？flex-wrap: wrap 是开关

移动端横屏广告太多会挤出屏幕，但直接隐藏又浪费流量。与其写一堆媒体查询，不如让 Flex 主动换行。

关键不是“要不要换”，而是“什么时候换”。flex-wrap: wrap 默认不启用，必须显式打开，否则所有广告死扛在同一行，最终被浏览器强制压缩或溢出。

• 在广告容器上加 flex-wrap: wrap
• 配合 justify-content: flex-start（默认值），确保换行后左对齐
• 如果希望换行后每行居中，得用 justify-content: center + 每行子项数量可控（否则中间空一大块）
• 慎用 justify-content: space-between：换行后末尾一行只剩 1 张图，它会被拉到最右，视觉失衡

广告图之间有缝隙？别怪 HTML 换行，先查 font-size: 0 是否漏了

用 inline-block 排广告时，HTML 源码里标签间的换行和空格会被渲染成一个空白字符，导致图间多出 4px 左右间隙——这问题在 Flex 里不存在，但一旦退回到 inline-block 方案（比如兼容 IE10），就必须处理。

很多人只记得给父容器设 font-size: 0，却忘了子元素（广告图）要重置字体大小，否则文字类广告文案会消失。

• 父容器加 font-size: 0
• 每张广告图（或其外层 div）加 font-size: 14px（或实际需要的字号）
• 同时配 vertical-align: top，否则不同图因基线差异上下错位
• 更省事的做法：直接换 Flex，避开这个坑
广告横向排列真正麻烦的从来不是“怎么排”，而是“怎么不让它在不同设备、不同图源、不同加载时机下崩”。Flex 是目前唯一能把尺寸、换行、对齐、间隙全收口的方案，其他方式要么要补丁（inline-block）、要么要降级（float）、要么太重（Grid）。别为兼容老浏览器牺牲现代逻辑——真要支持 IE11，用 display: -ms-flexbox fallback 就够了。