用 display: inline-block 可实现并排，但需处理换行符导致的间隙；推荐现代方案 display: flex（兼容IE10+）或 grid（适合复杂列布局），并注意 box-sizing: border-box 防止溢出。
用 display: inline-block 最快搞定，但得处理默认间隙
两个 <div> 默认是块级元素，天然换行。想并排，最直接的办法是让它们“假装”是内联元素。<code>display: inline-block 就干这事——既保留块级元素能设宽高的特性，又支持同行排列。
但实际一试会发现：两个 <div> 之间总有几像素空隙，像被看不见的空格撑开。这不是 bug，是浏览器把 HTML 换行符和缩进当作了文本节点渲染的结果。<p>常见错误现象：<code>margin-left 设成负值去“抵消”，结果在不同字体或缩放下错位；或者给父容器设 font-size: 0，但子元素又忘了重置字体大小，文字直接消失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 父容器设
font-size: 0，两个子<div> 各自设回需要的 <code>font-size（比如16px） - 或者把两个
<div> 的 HTML 标签写在同一行，中间不留空格或换行（<code><div></div> <div></div>） - 避免用
float，它会脱离文档流，后续布局容易失控
Flex 布局更稳，但老浏览器兼容性要留意
现代项目首选 display: flex，父容器一行声明，子元素自动并排，不用操心间隙、对齐、换行逻辑。
使用场景：需要响应式（比如小屏时堆叠）、要控制对齐方式（居中/右对齐/等分宽度）、或者后续可能加更多同级 <div>。<p>参数差异：<code>flex-direction: row（默认）是横向，并排；flex-wrap: nowrap（也是默认）禁止换行；如果子元素总宽超容器，它们会被压缩——这时可以加 flex-shrink: 0 阻止压缩。
兼容性影响：IE10+ 支持，但 IE10–IE11 对某些 flex 属性（如 align-items 在某些上下文中）有 bug；如果必须支持 IE9 及以下，就别用。
示例（父容器样式）：
container {
display: flex;
gap: 8px; /* 现代写法，替代 margin，不干扰盒模型 */
}Grid 适合固定列数或复杂对齐，别为简单并排硬上
如果只是让两个 <div> 并排，用 CSS Grid 属于“杀鸡用牛刀”。但它真正有用的地方是：你明确知道要两列、且每列宽度有特定规则（比如左边 200px，右边占满剩余空间）。<p>常见错误现象：只写 <code>display: grid，没配 grid-template-columns，结果还是竖着排；或者写了 grid-template-columns: 1fr 1fr，但忘了子元素没指定顺序，依赖源码顺序——这本身没问题，但容易和 flex 混淆。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 两列等宽：
grid-template-columns: 1fr 1fr - 左定宽右自适应：
grid-template-columns: 200px 1fr - 想留间隙，优先用
gap，不是margin
性能无明显差别，但学习成本比 flex 略高，调试时得看清楚是 grid 容器还是子项在起作用。
别忽略 width 和 box-sizing，否则并排会“掉下来”
即使用了 inline-block 或 flex，如果两个 <div> 加起来宽度超过父容器（比如都设了 <code>width: 50%，但又加了 padding 或 border），它们照样会换行——这是盒模型计算导致的。
原因在于默认 box-sizing: content-box：你设的 width 只算内容区，padding 和 border 是额外加上的。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局重置（推荐）：
* { box-sizing: border-box; } - 或者单独给这两个
<div> 加 <code>box-sizing: border-box - 检查是否意外继承了外边距（
margin），尤其是margin-top把第二个<div> 推到下一行<p>这个点最容易被忽略——样式看着没问题，布局却崩了，最后发现是 <code>padding: 10px让总宽多出 40px。
