html如何将两个div放在一起

两个 div 默认上下排列，水平并排应优先用 display: flex；inline-block 需防空白符干扰；绝对定位易致塌陷和响应失效；移动端需关注 flex-wrap、min-width 及 flex 属性。

两个 div 默认就是挨着的，但常被 margin 或 display 搞散了

浏览器默认把 div 当成块级元素，每个都会独占一行——所以你写两个 div，它们天然上下排列，不是左右“放在一起”。所谓“放在一起”，实际是要它们水平并排。常见错误是直接加 float 或乱用 position，结果触发 BFC、父容器塌陷、响应失效等问题。

推荐做法：优先用 display: flex 控制父容器：

• 给父 div 加 display: flex，子 div 就自动水平排列
• 不用改子元素的 display，也不用清浮动
• 兼容性够用（IE10+），比 inline-block 少一堆空白符干扰

<div style="display: flex;">   <div> 左边 </div>   <div> 右边 </div> </div>

用 inline-block 也能并排，但得防空白符吃宽度

如果必须支持老 IE（比如 IE8），display: inline-block 是备选方案。但它有个隐蔽坑：HTML 中两个 div 标签之间的换行或空格，会被渲染成一个空格字符，占约 4px 宽度，可能导致第二项换行。

• 解决办法之一：删掉 HTML 中两个 div 之间的所有空白（包括换行）
• 或者给父容器设 font-size: 0，子元素再单独设字体大小
• 别依赖 vertical-align 对齐——不同内容高度下容易错位

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

绝对定位强行并排？除非你真需要脱离文档流

有人一上来就给两个 div 都加 position: absolute，再手动设 left 和 top。这确实能“放一起”，但代价明显：

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

• 它们脱离文档流，父容器高度会变成 0（塌陷）
• 响应式布局里几乎没法维护：left: 100px 在小屏上可能直接溢出
• 无法用 justify-content 或 gap 做间距控制
• z-index 管理、鼠标事件穿透等问题会陆续冒出来

除非你在做动画遮罩、弹窗浮层这类明确要脱离流的场景，否则别为“并排”动用 absolute。

移动端适配时，别忘了 flex-wrap 和 min-width

两个 div 并排后，在手机上撑不开？常见原因是没考虑内容最小宽度或容器弹性策略。

• 默认 flex-wrap: nowrap，子项宁可溢出也不换行；想折行就加 flex-wrap: wrap
• 子 div 里有长单词或固定宽图片？加 min-width: 0 防止它拒绝收缩
• 用 flex: 1 让它们等分宽度，比写死 width: 50% 更可靠（后者在有 padding/border 时容易溢出）

<div style="display: flex; flex-wrap: wrap;">   <div style="flex: 1; min-width: 0;"> 内容可能很长……</div>   <div style="flex: 1; min-width: 0;"> 另一块 </div> </div>

事情说清了就结束。真正卡住人的，往往不是“怎么并排”，而是并排之后的对齐、换行、缩放、内容截断这些连带反应——盯着两个 div 看，不如先看父容器的 display 和子项的 flex 行为。