最直接可靠的方法是父容器设 display: flex，子 div 自动横向排列；需等宽用 flex: 1，固定宽则设 width；注意 IE10–11 兼容性，建议用完整 flex 写法。
用 display: flex 最直接可靠
两个 div 默认是块级元素，天然换行。想放一行，核心是让父容器控制子项的排列方式。display: flex 是目前最稳妥、兼容性足够（IE10+）、语义清晰的做法。
常见错误现象：Float: left 没清浮动导致父容器高度塌陷；inline-block 因换行或空格产生意外间隙；position: absolute 脱离文档流，后续布局易失控。
- 父容器加
display: flex，子div自动横向排列 - 不需要额外设置子项的
display或float - 若需等宽，可给子项加
flex: 1；若需固定宽度，直接设width - 注意 IE10–IE11 对
flex的部分属性支持不全（如flex-grow缩写），建议用完整写法flex: 1 1 auto
左边 右边 用 display: inline-block 时要小心空白符
这个方法在老项目或需要兼容 IE8/9 时还会遇到，但实际用起来容易出视觉错位——因为 html 中换行和缩进会被渲染成一个空格。
使用场景：极简结构、无 js 干预、对齐要求不高、必须支持老旧浏览器。
立即学习“前端免费学习笔记（深入）”；
- 子
div设display: inline-block，父容器设font-size: 0消除间隙 - 子项内需重置字体大小，比如
font-size: 14px - 不能依赖
vertical-align默认值，建议显式写vertical-align: top避免基线对齐错位 - 性能上无明显差异，但维护成本略高，容易漏掉某一处的
font-size重置
左边 右边 为什么不用 float？
虽然加 float: left 看似能“挤”到一行，但它会引发一连串连锁反应，不是单纯“放一起”这么简单。
典型问题：div 浮动后脱离文档流，父容器高度变成 0，下方元素会上移覆盖；清除浮动的方案（如 ::after 伪元素）增加冗余代码；响应式断点中容易失效。
- 除非你在维护十多年前的老系统，否则没必要主动选
float - 如果已有浮动代码，务必检查父容器是否设置了
overflow: hidden或其他 BFC 触发方式 -
float和flex混用会导致行为不可预测，浏览器可能忽略部分样式
移动端适配时别忘了 min-width 和换行控制
两个 div 并排在桌面端没问题，但在小屏上可能撑破容器或文字溢出。这不是布局失效，而是响应逻辑没跟上。
关键点不在“怎么放一行”，而在“什么时候该换行”。
- 给子
div加min-width: 0（尤其配合flex时），防止内容过长强行撑开 - 用
flex-wrap: wrap允许父容器在空间不足时自动折行 - 避免对子项设死宽度（如
width: 50%），改用flex: 1+max-width组合更健壮 - 测试真机时重点看输入框、按钮、长英文单词是否导致横向滚动
父容器的 display 类型、子项的尺寸约束、以及响应边界下的行为预期，这三者没对齐，光调样式是治标。很多人卡在“看起来排好了”，但一输长文本或切到手机就露馅。