相对定位元素出现换行异常，求CSS布局解决方案

你要实现的布局示意图：

你的代码出现换行等异常的核心原因是子容器使用了position: relative——相对定位不会让元素脱离文档流，子元素仍会按照块级元素默认的垂直排列规则布局，自然会出现换行，无法实现你想要的网格定位效果。

修正后的完整代码 #

CSS 部分

#parent-container {
  width: 300vw;
  height: 200vh;
  left: -100vw;
  top: 0;
  position: absolute;
  /* 明确设置为定位容器，确保子元素绝对定位以此为参照 */
  position: relative;
}

.sub-container {
  border: 3px solid black;
  width: 100vw;
  height: 100vh;
  /* 替换relative为absolute，让元素脱离文档流，自由定位 */
  position: absolute;
}

#content1 {
  left: 100vw;
  top: 0;
}

#content2 {
  left: 200vw;
  top: 0;
}

#content3 {
  left: 100vw;
  top: 100vh;
}

#content4 {
  left: 0;
  top: 0;
}

HTML 部分

<div id="parent-container">
  <div id="content1" class="sub-container"></div>
  <div id="content2" class="sub-container"></div>
  <div id="content3" class="sub-container"></div>
  <div id="content4" class="sub-container"></div>
</div>

关键调整说明 #

• 将子容器的position: relative改为position: absolute，彻底脱离文档流，不再受默认块级排列规则限制
• 确保父容器为定位容器（position: absolute/relative/fixed均可），让子元素的绝对定位以父容器为基准
• 修正了content3的left值（从0改为100vw），匹配示意图中它位于中间下方的布局；同时调整content4的定位，使其对应左侧位置

内容的提问来源于stack exchange，提问作者Pranav Nair