最快见效方案是 display: inline-block，但需消除标签间空白符；现代推荐用 display: flex，兼顾对齐、间距与响应式，避免使用 float 或 absolute。
用 display: inline-block 最快见效
两个 div 默认是块级元素，天然换行。想让它们并排，最直接的办法就是改显示模式。inline-block 既保留块级元素能设宽高的特性，又支持同行排列。
常见错误是只加了 display: inline-block，却忘了默认有空白符（换行/空格）导致间隙——这是实际项目里卡住最多人的点。
- 必须去掉 HTML 中两个
div标签之间的换行或空格，或者用注释消除：<div></div> <!-- --><div></div> - 也可以给父容器设
font-size: 0，子元素再单独设字体大小（注意继承影响） - 别用
float，它会脱离文档流，后续布局容易出错，且需要清浮动
flex 是现代布局的推荐解法
如果父容器能控制，display: flex 是更干净、可控的方式。它天然处理对齐、间距、换行逻辑，兼容性也足够好（IE10+ 支持基本功能）。
容易踩的坑是忽略主轴方向和子项的默认行为：比如没设 flex-wrap: nowrap，内容多时可能意外换行；或者子项没设 flex-shrink: 0，宽度不够时被压缩变形。
立即学习“前端免费学习笔记（深入）”；
- 父容器加
display: flex即可，默认横向排列 - 用
gap控制间距，比margin更可靠（不会触发外边距合并） - 子项若需等宽，用
flex: 1；若需固定宽度，直接设width并配flex-shrink: 0
为什么不用 float 或 position: absolute
这两种方式都能“看起来”并排，但代价高、副作用明显，不建议用于常规布局。
float 会让父容器高度塌陷，必须额外清浮动（overflow: hidden 或伪元素），而且响应式下难调整；position: absolute 则完全脱离文档流，兄弟元素无法感知它的存在，后续添加内容极易错位。
-
float已被 CSS WG 标记为“legacy”，MDN 明确建议用flex或grid替代 -
position: absolute只适合浮层、图标定位等少数场景，不是布局工具 - 两者在缩放、打印、屏幕阅读器支持上都弱于标准流方案
移动端适配时要注意什么
并排在桌面端正常，到手机上可能直接挤成一列甚至溢出。这不是 display 的问题，而是尺寸和响应逻辑没跟上。
关键不是“怎么让它并排”，而是“什么时候该并排”。比如表单里的两个输入框，在小屏上更适合上下堆叠，体验更安全。
- 用媒体查询控制：小屏下把父容器从
flex改成block，或子项加flex-direction: column - 避免固定像素宽，优先用
max-width+flex自适应 - 测试真机缩放和横屏，
viewport设置错误会让所有布局失效
实际写的时候，flex 基本覆盖 95% 场景，剩下 5% 是需要考虑是否真该并排——这点比技术选择更重要。
