本文详解在强制使用 position: absolute 的前提下，通过精确控制 left/right、容器宽度与子元素尺寸关系，实现两个 div 水平并列且中间留白分隔的可靠方案。
本文详解在强制使用 `position: absolute` 的前提下，通过精确控制 `left`/`right`、容器宽度与子元素尺寸关系，实现两个 div 水平并列且中间留白分隔的可靠方案。
当设计要求子元素必须使用 position: absolute（例如需脱离文档流、叠加动画层或响应式精确定位），又希望它们像 inline-block 或 flex 那样并排布局时，CSS 的常规流式布局方法将失效——因为绝对定位元素默认重叠于父容器左上角。此时，唯一可控的方式是显式声明每个元素的定位坐标与尺寸约束。
✅ 正确解法：双侧锚定 + 容器宽度管控
核心思路是：
- 为父容器（.page）设定明确宽度（如 600px），作为布局基准；
- 左侧 .game-list 使用 left: 0 锚定左边缘；
- 右侧 .game-hub-list 使用 right: 0 锚定右边缘；
- 二者宽度之和 必须小于父容器宽度，剩余空间即为天然“分隔区”。
⚠️ 注意：原始代码中 .game-list 和 .game-hub-list 设置了 padding: 2rem（即 32px），而 box-sizing 虽已设为 border-box，但未显式指定 width，导致实际渲染宽度 = 内容宽 + 内边距。经计算，300px 宽度减去 2rem × 2 = 64px 水平内边距后，可视区域宽度为 236px —— 这正是示例中采用 width: 236px 的原因。
以下是可直接运行的完整实现：
html, body { max-width: 100%; overflow-x: hidden; margin: 0; background-color: #333; color: white; } .page { position: relative; /* 推荐：使绝对定位子元素以它为参考系 */ width: 600px; /* 必须显式设定，作为左右布局的总基准 */ margin: 2rem auto; /* 居中显示（可选） */ } /* 左侧列表：锚定左边缘 */ .game-list { position: absolute; top: 0; left: 0; width: 236px; /* = 300px - 2×32px padding */ height: 200px; padding: 2rem; background-color: #000; border-radius: 10px; overflow: hidden; box-sizing: border-box; } /* 右侧列表：锚定右边缘 */ .game-hub-list { position: absolute; top: 0; right: 0; width: 236px; height: 200px; padding: 2rem; background-color: #000; border-radius: 10px; overflow: hidden; box-sizing: border-box; } /* 可选：添加视觉分隔线（伪元素实现，不占 DOM） */ .page::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1px; height: 120px; background-color: #444; z-index: 1; }<div class="page" id="games"> <div class="game-list"> <h3>Games</h3> <div class="game-card"> @@##@@ <h4 class="game-card-title">Coming soon</h4> <p class="game-card-description">Lorem Ipsum</p> </div> </div> <div class="game-hub-list"> <h3>Game Hubs</h3> <div class="game-hub-card"> @@##@@ <h4 class="game-hub-card-title">Coming soon</h4> <p class="game-hub-card-description">Lorem Ipsum</p> </div> </div> </div>? 关键注意事项
- position: relative on parent is recommended：虽然 #games 原为 absolute，但更健壮的做法是将 .page 设为 relative，使其成为子元素绝对定位的包含块（containing block），避免意外受更高层级定位上下文干扰。
- 避免 display: inline-block 与 absolute 混用：二者逻辑冲突——inline-block 属于文档流布局，而 absolute 完全脱离流，混合使用会导致不可预测的覆盖或塌陷。
- 动态内容需谨慎：若 .game-card 内容高度不固定，建议为 .game-list 和 .game-hub-list 添加 min-height 或使用 height: fit-content（注意兼容性），防止内容溢出。
- 响应式适配建议：可通过媒体查询按视口缩放 .page 宽度，并同比例调整子元素 width 和 padding，或改用 calc(50% – 20px) 实现弹性分隔（需确保父容器 width 可计算）。
掌握这种「锚点+尺寸守恒」的绝对定位思维，不仅能解决并排布局问题，也为复杂 ui（如仪表盘卡片矩阵、游戏 HUD 层级、动效遮罩对齐）提供坚实基础。