用 display: inline-block 可让两个 div 并排显示，需同时设置该属性并处理默认间隙与 vertical-align 对齐问题。
用 display: inline-block 让两个 <div> 并排显示
<p>默认 <code><div> 是块级元素，天然独占一行。想让两个并排，最直接的办法是改它的显示行为。<code>display: inline-block 既能保持内部盒模型（比如能设宽高、内边距），又像文字一样可以同行排列。
常见错误现象：display: inline 看似可行，但它会忽略 width、height 和垂直方向的 margin，实际很难控制布局。
- 必须给两个元素都加
display: inline-block - 注意默认有空白符（换行/空格）会被渲染成约
4px间隙，解决方法：父容器设font-size: 0，子元素再单独设字体大小；或把 HTML 中两个标签写在同一行、不留空格 - 垂直对齐默认是
baseline，可能导致上下错位，建议显式设vertical-align: top或middle
用 float 实现两栏但得记得清除浮动
float 是老办法，现在不推荐新项目用，但遇到遗留代码或简单场景仍可能碰到。它让元素脱离文档流向左或右“漂”，其他内容会绕开它。
使用场景：只需要快速实现左右两栏，且父容器高度不需要自适应子元素时。
立即学习“前端免费学习笔记（深入）”；
- 两个块分别加
float: left和float: right，宽度加起来不能超 100%（记得留点余量防小数误差） - 父容器高度塌陷是最大坑——如果不清除浮动，父容器可能显示为高度为 0，背景、边框全失效
- 清除方法之一：在父容器末尾加一个空
<div style="clear: both"></div>；更稳妥的是用伪元素：::after { content: ""; display: table; clear: both; }
Flex 布局最稳，但 IE10–11 需要加前缀
现代标准方案，父容器设 display: flex，子元素自动水平排列。兼容性好，控制力强，是当前首选。
性能影响几乎可忽略，但要注意旧版浏览器支持细节。
- IE10–11 支持
display: -ms-flexbox，需同时写两行：display: flex和display: -ms-flexbox - 子项默认等宽？不会。它们按内容宽度自然排列，如需等分，给每个子项加
flex: 1 - 别漏掉
flex-wrap: nowrap（默认值），否则内容超宽时可能意外换行
Grid 布局适合精确控制，但别在简单两栏上过度设计
如果只是让两个块并排，用 display: grid 有点杀鸡用牛刀。但它真正有用的地方在于：你后续可能加第三块、需要响应式重排、或者上下左右都要对齐。
容易踩的坑是误以为 Grid 必须配 grid-template-columns 才生效——其实只设 display: grid 默认就是单列，必须明确声明列数。
- 两栏写法：
display: grid; grid-template-columns: 1fr 1fr（或具体像素/百分比） - IE 不支持原生 Grid（包括 IE11），哪怕加前缀也无效，纯不可用
- 移动端 Safari 旧版本对
fr单位支持不稳定，可用minmax(0, 1fr)兜底
真正麻烦的不是怎么写，而是要不要考虑父容器宽度变化、子内容长短差异、是否要响应式断点、以及目标浏览器里哪个属性被悄悄忽略了。这些细节堆在一起，才让“同一行”这件事没看起来那么直白。
