本文详解在强制使用 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">
<img class="game-card-img" src="" alt="Game Icon">
<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">
<img class="game-hub-card-img" src="" alt="Game Hub Icon">
<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 层级、动效遮罩对齐）提供坚实基础。
