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。这确实能“放一起”，但代价明显：

动感购物HTML

修正了V1.10的一些BUG感购物HTML系统是集合目前网络所有购物系统为参考而开发，代码采用DIV编号，不管从速度还是安全我们都努力做到最好，此版虽为免费版但是功能齐全，无任何错误，特点有：专业的、全面的电子商务解决方案，使您可以轻松实现网上销售；自助式开放性的数据平台，为您提供充满个性化的设计空间；功能全面、操作简单的远程管理系统，让您在家中也可实现正常销售管理；严谨实用的全新商品数据库，便于

下载

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

• 它们脱离文档流，父容器高度会变成 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>