求助：响应式视频容器置于blog-column中出现0×30尺寸异常

这个问题我遇见过好几次，根源在于inline-block元素的宽度计算逻辑和你的视频容器布局方式冲突了，咱们一步步拆解解决：

问题原因 #

你的.blog-column设置了display: inline-block，这类元素的宽度是由内部处于文档流中的元素来撑开的。而你的.video-container用了经典的响应式视频布局：height: 0 + 百分比padding-bottom来实现16:9比例，内部的iframe又是绝对定位（脱离文档流），完全不会贡献宽度给父元素。

这就导致了恶性循环：.blog-column因为没有流内元素撑开宽度，收缩为0；.video-container的padding-bottom: 56.25%是基于父元素（.blog-column）的宽度计算的，宽度为0的话，padding-bottom直接变成0，再加上padding-top: 30px，最终容器就变成了0×30的尺寸，样式自然失效。

解决方案（无需修改.blog-column样式） #

下面两种方法都能完美解决问题，你可以根据自己的浏览器兼容需求选择：

方法一：兼容旧浏览器的经典方案 #

给.video-container添加宽度约束，主动撑开父元素的宽度，同时保留响应式特性：

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 维持16:9的宽高比 */
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  width: 100%; /* 占满父元素可用宽度 */
  max-width: 590px; /* 和.blog-column的max-width保持一致，避免超出 */
  min-width: 300px; /* 可选：设置最小宽度，防止极端窄屏布局变形 */
}

.video-container iframe, .video-container object, .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

通过设置width:100%和max-width:590px，.video-container会先把.blog-column撑开到合理宽度，之后百分比padding就能正常计算出高度，iframe也能占满整个容器。

方法二：现代浏览器推荐方案（更简洁） #

如果你不需要兼容IE等老旧浏览器，直接用CSS的aspect-ratio属性可以大幅简化代码，彻底避开padding百分比的坑：

.video-container {
  position: relative;
  aspect-ratio: 16/9; /* 直接定义宽高比，比百分比padding更直观 */
  padding-top: 30px; /* 保留原有的顶部内边距 */
  width: 100%;
  max-width: 590px;
}

.video-container iframe, .video-container object, .video-container embed {
  position: absolute;
  top: 30px; /* 避开顶部内边距，防止内容被遮挡 */
  left: 0;
  width: 100%;
  height: calc(100% - 30px); /* 减去顶部内边距的高度，确保占满容器 */
}

这个方案代码更清晰，维护起来也更方便，是现在响应式媒体布局的首选方式。

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