四招让两个div并排显示，简单实用！

本文深入解析了让两个div在同一行显示的四种主流CSS方法——inline-block、float、Flexbox和Grid，既指出各自适用场景与兼容性差异（如inline-block见效快但需处理空白缝隙，float需清除浮动且已趋淘汰，Flexbox为现代首选但要注意IE10–11兼容细节，Grid简洁高效却完全不支持IE），也揭示了常被忽视的关键陷阱：父容器box-sizing、子元素内外边距、内容撑开、换行溢出等隐性因素，帮你避开“明明写了CSS却还是换行”的真实开发痛点，真正实现稳定、可维护、跨浏览器的并排布局。

用 display: inline-block 最快见效，但要注意空白符

两个 div 默认是块级元素，天然换行。设成 inline-block 是最直觉、兼容性也好的办法，IE8+ 都支持。

常见错误现象：设了 display: inline-block 后，两个 div 之间仍有缝隙，看起来没贴紧。

• 这是 HTML 中换行/空格被渲染成一个空格字符导致的，不是 CSS bug
• 解决方法之一：把两个 div 标签写在同一行，中间不留空格或换行
• 更稳妥的做法：给父容器加 font-size: 0，子元素再单独设 font-size（注意内联文本会失效）
• 别忘了给每个 div 设宽度，否则可能因内容撑开而换行

用 float 老法子，但得处理父容器塌陷

虽然 float 已不算现代方案，但在老项目或简单布局里仍常见，尤其要兼容 IE7–8 时。

使用场景：不需要弹性响应，且父容器高度必须包裹子元素。

• 给两个 div 分别加 float: left
• 父容器必须清除浮动，否则高度塌陷——常用 overflow: hidden 或伪元素 ::after 清除
• float 元素会脱离文档流，后面兄弟元素可能“上浮”进空隙，需留意布局顺序
• 不推荐在 Flex/Grid 可用环境下还用它，维护成本高

用 display: flex 是当前首选，但注意 IE10–11 的坑

父容器设 display: flex，子 div 默认就水平排列，代码干净，响应式友好。

容易踩的坑集中在兼容性和默认行为：

• IE10–11 对 Flex 的实现有差异，比如 flex: 1 在 IE11 下可能不收缩，建议显式写 flex: 1 1 auto
• 默认 flex-wrap: nowrap，内容超宽时不会换行，可能溢出；需要换行得手动加 flex-wrap: wrap
• 如果子 div 没设宽度，又内容长短不一，可能分配不均——用 flex-basis 或固定 width 控制更稳
• 移动端 Safari 旧版本对 align-items 有渲染偏差，垂直居中建议搭配 min-height 验证

用 display: grid 简洁但别忽略基础限制

适合明确列数和尺寸的场景，比如双栏卡片、表单左右标签+输入框。

参数差异小，但初始化成本略高：

• 父容器设 display: grid + grid-template-columns: 1fr 1fr 就能均分两列
• 不设 grid-gap 就没间隙，比 flex 更“严丝合缝”
• IE 完全不支持 display: grid（包括 IE11），除非项目已放弃 IE
• Grid 不会像 Flex 那样自动根据内容调整主轴方向，想换行得用 grid-auto-flow: column 等额外配置

理论要掌握，实操不能落！以上关于《四招让两个div并排显示，简单实用！》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！