无法用CSS实现DIV左、中、右布局对齐，布局混乱求助

你的布局混乱是因为绝对定位元素未指定具体位置，加上中间的.video容器占满整个视口，导致三个区块相互重叠。下面是两种可行的修复方案：

方案1：使用Flexbox布局（推荐） #

Flexbox是实现多栏布局最简洁的方式，无需依赖绝对定位：

修正后的CSS #

body {
  background: #000;
  overflow: hidden;
  margin: 0;
  /* 将body设为flex容器，直接控制子元素排列 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  padding: 0 20px; /* 可选：给左右栏加边距避免贴边 */
  box-sizing: border-box;
}

.video {
  /* 中间区块保持固定尺寸，防止被压缩 */
  flex-shrink: 0;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

修正后的HTML #

<body>
  <div class="left">
    <p style="color: blue;">Title</p>
    <img src="https://place-hold.it/336x280" /> <br>
    <p style="color: blue;">Title</p>
    <img src="https://place-hold.it/280x500" />
  </div>
  
  <div class="video">
    <img src="https://place-hold.it/500x500" />
  </div>
  
  <div class="right">
    <p style="color: blue;">title</p>
    <img src="https://place-hold.it/336x280" /> <br>
    <p style="color: blue;">Title</p>
    <img src="https://place-hold.it/280x500" />
  </div>
</body>

方案2：修复绝对定位 #

如果坚持使用绝对定位，需给左右栏明确位置，同时保证中间区块不被遮挡：

修正后的CSS #

body {
  background: #000;
  overflow: hidden;
  margin: 0;
  position: relative; /* 让绝对定位元素以body为参考容器 */
}

.video {
  width: 100vw;
  height: 100vh;                
  display: grid;
  place-items: center;
}

.left {
  text-align: left;
  position: absolute;
  left: 20px; /* 固定左侧位置 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
}

.right {
  text-align: right;
  position: absolute;
  right: 20px; /* 固定右侧位置 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
}

说明 #

• 方案1的Flexbox布局更灵活，响应式表现更优，优先推荐。
• 两种方案都能实现左栏居左、中间居中、右栏居右的布局效果，不会出现重叠混乱。

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