html如何让两个div在同一行显示

最快见效的是 display: inline-block，但需处理空白符缝隙；float 兼容旧版但需清除浮动；flex 是当前首选，注意 ie10–11 兼容性；grid 适合固定列布局，ie 不支持。

用 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 等额外配置

父容器的 box-sizing、子元素的 margin 和 padding，这些看似无关的属性，常常才是两个 div 没真正并排的真正原因。