要实现像素级精确的等高布局，咱们得先从16:9的比例关系入手，通过数学推导得出宽度的精确表达式，再用CSS calc()实现动态计算。下面一步步来：

一、核心推导逻辑 #

咱们先明确所有约束条件：

• 所有缩略图的宽高比固定为16/9，因此高度 = 宽度 × 9/16
• 左侧大图宽度为x，右侧单个小图宽度为y
• 缩略图之间的间隙为z = var(--gap)
• 容器总可用宽度为100cqw（因为用了container-type: inline-size，100cqw就是当前容器的实际宽度）
• 核心目标：右侧两小图的总高度（含中间间隙）必须和左侧大图的高度完全相等

根据目标列方程：

1. 左侧大图高度：H = x × 9/16
2. 右侧单个小图高度：h = y × 9/16
3. 右侧列总高度 = 小图高度 + 间隙 → h + z = H

把高度公式代入目标等式，整理后得到第一个方程：

x - y = (16 × z) / 9  --- 方程1

再结合总宽度的约束（左侧大图 + 右侧小图 + 中间间隙 = 容器总宽度），得到第二个方程：

x + y + z = 100cqw  --- 方程2

联立两个方程求解，最终得到x和y的精确表达式：

x = (9×100cqw + 7×z) / 18
y = (9×100cqw - 25×z) / 18

二、替换为CSS calc()实现 #

把上面的表达式转换成CSS变量，直接替换你原来硬编码的--x和--y即可：

body { 
  margin: 0; 
  text-align: justify; 
} 
main { 
  margin: 1em max(1em, 10vw); 
  container-type: inline-size; 
} 
.videos { 
  --gap: 20px;
  /* 用calc()精确计算x和y */
  --x: calc( (9 * 100cqw + 7 * var(--gap)) / 18 );
  --y: calc( (9 * 100cqw - 25 * var(--gap)) / 18 );
  display: flex; 
  gap: var(--gap); 
  align-items: start; 

  .right-column { 
    display: flex; 
    flex-direction: column; 
    gap: var(--gap); 
  } 
} 
#v1, #v2, #v3 { 
  aspect-ratio: 16/9; 
  background: green; 
} 
#v1 { 
  width: var(--x); 
  flex-shrink: 0; 
} 
#v2, #v3 { 
  width: var(--y); 
}

对应的HTML部分保持不变即可：

<main>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur. </p>
  <p> Cras volutpat velit non mi sagittis condimentum. Cras tempor aliquet turpis sed pretium. Nunc aliquet sodales turpis quis ultrices. Duis auctor accumsan enim, quis maximus ex malesuada a. Donec a felis ut erat tempus euismod non vel neque. Proin lectus massa, sagittis at imperdiet nec, consequat ut neque. Sed vel placerat neque, vel varius urna. Vivamus interdum euismod urna a accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
  <section class="videos">
    <div id="v1"></div>
    <div class="right-column">
      <div id="v2"></div>
      <div id="v3"></div>
    </div>
  </section>
  <p> Nulla rhoncus aliquam mauris, eu pretium dolor auctor in. Maecenas a sollicitudin dolor, eget commodo quam. Proin et dui sed ligula vulputate egestas. Quisque eget augue vitae purus placerat pharetra. Aliquam rhoncus convallis lorem, sed facilisis odio blandit scelerisque. Vivamus viverra urna ac nulla interdum, eget ullamcorper leo maximus. Mauris nec feugiat enim. Nam congue, dui sit amet vestibulum posuere, leo mauris fermentum lorem, eget bibendum velit nunc quis leo. </p>
  <p> Curabitur eget ullamcorper justo, sit amet dictum neque. Fusce vitae ligula et felis auctor vulputate vel suscipit nibh. Integer a felis varius purus vestibulum viverra. Morbi venenatis placerat augue sit amet commodo. Sed dapibus molestie eros, vitae ultrices nunc commodo aliquam. Vivamus tempus mollis massa vel egestas. Donec ut ante quis eros commodo volutpat. Proin sem nisi, viverra ac sem tristique, consectetur laoreet sapien. Vivamus suscipit orci vel euismod scelerisque. Nullam sed pulvinar tellus. Nullam pulvinar arcu eget nibh rutrum, eget faucibus ligula ullamcorper. </p>
</main>

三、为什么这能完美解决问题？ #

• 像素级精确：不管你把--gap改成任何值（比如10px、30px），右侧列的总高度都会和左侧大图高度完全匹配，不会出现错位
• 响应式自动适配：因为用了cqw单位，容器宽度变化时（比如窗口缩放、不同设备），x和y会自动重新计算，保持布局比例
• flex布局兼容性：结合flex的gap和固定宽高，确保布局不会因为内容溢出或收缩变形

这样修改后，你就不用再手动调整64cqw、30cqw这类近似值了，完全由公式动态计算，实现真正的像素完美布局~