HTML并排显示div的几种方法

本文深入解析了HTML中让两个div并排显示的三大主流方法——inline-block、float和Flexbox，直击实际开发中的痛点：空白符缝隙、浮动塌陷、对齐错位与兼容性陷阱；文章明确指出现代布局应首选Flexbox（父容器仅需`display: flex`一行代码），不仅简洁可靠、兼容IE10+，还能精准控制对齐、等宽分配与响应式行为，同时细致拆解了inline-block的font-size hack和float的清浮动弊端，并强调真正影响效果的往往是被忽视的默认样式（如margin、line-height、box-sizing），引导开发者从computed styles入手，告别盲目调参，实现稳定可控的并排布局。

用 display: flex 最稳，父容器加一行就搞定

两个 div 默认是块级元素，垂直堆叠。想并排，核心是让父容器“管住”子项的排列方向。现代布局首选 display: flex，兼容性好（IE10+），行为可预测。

常见错误是只给子 div 加 float 或 inline-block，结果一换字体、一加边框就错位，还容易触发 BFC 问题。

• 父容器加 display: flex，子 div 自动水平排列
• 加 align-items: center 垂直居中（否则默认顶部对齐）
• 不设宽度时，子项会按内容撑开；想等宽就加 flex: 1
• 注意：如果子 div 有 margin 或 padding，会影响实际间距，别靠猜

<div style="display: flex; align-items: center;">
  <div>左边</div>
  <div>右边</div>
</div>

用 display: inline-block 要小心空白符

老办法还能用，但 HTML 源码里换行和空格会被渲染成一个空格，导致两个 div 间出现无法忽略的缝隙。这不是 bug，是规范行为。

• 子 div 设 display: inline-block，父容器设 font-size: 0 消除间隙
• 子 div 内部需重设 font-size，否则文字看不见
• 垂直对齐默认基线对齐（vertical-align: baseline），常导致上下偏移，改成 top 或 middle
• IE8 不支持 inline-block 对块级元素生效（需额外 hack）

<div style="font-size: 0;">
  <div style="display: inline-block; vertical-align: top; font-size: 14px;">左</div>
  <div style="display: inline-block; vertical-align: top; font-size: 14px;">右</div>
</div>

别碰 float，除非要兼容 IE7

浮动本意是图文混排，硬拉两个 div 并排会引发父容器塌陷、后续元素上浮等问题，修复成本远高于收益。

• 必须清浮动（比如父容器加 overflow: hidden 或伪元素 ::after）
• 子 div 需显式设宽度，否则可能挤出父容器
• 响应式下宽度百分比计算易出错，flex 或 grid 更可控
• 现代项目里用 float 布局两个栏，等于主动给自己埋雷

对齐细节：为什么看起来“没对齐”

并排后发现高低不一、文字没居中、边框不对称——大概率不是布局失效，而是默认样式干扰。

• div 默认 vertical-align: baseline 只对 inline 系元素有效，flex 下得用 align-items
• 子 div 里的 p、h3 有默认上下 margin，会撑高容器，先重置 margin: 0
• 字体行高（line-height）不同，视觉上也会造成“没对齐”，统一设更可靠
• 边框（border）和内边距（padding）算进盒模型，用 box-sizing: border-box 避免尺寸误判

真正麻烦的从来不是“怎么排成一行”，而是排完之后各种默认样式在暗处拉扯。多看一眼 computed styles，比反复调 margin 有用得多。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML并排显示div的几种方法》文章吧，也可关注golang学习网公众号了解相关技术文章。