两个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 行为。 
