根本原因是video元素为内联替换元素且未设宽高与对齐方式，叠加poster尺寸差异、加载时机不同及浏览器fallback行为不一，导致父容器高度浮动、Flex/Grid换行错位。
视频列表项高度不一致导致换行错位
根本原因是 元素默认为内联替换元素，且未显式设置宽高或对齐方式，加上各视频封面加载时机不同、poster 尺寸各异、浏览器渲染时 fallback 行为差异（比如无 poster 时显示空白黑块），导致父容器（如 div 或 figure）高度浮动，Flex/Grid 布局下换行后对齐失效。
实操建议：
- 统一给每个
的直接父容器设固定高度 +overflow: hidden，例如height: 180px - 用
object-fit: cover控制自身的缩放行为，避免拉伸变形 - 强制 poster 图片尺寸一致（服务端裁剪或 CSS 覆盖：给
video::before伪元素设背景图并background-size: cover） - 若用 Flex 布局，加
align-items: flex-start避免默认 stretch 拉伸子项
Grid 布局中 video 列表换行后列宽抖动
常见于用 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) 的响应式写法——当某行末尾项因高度突变（如播放控件展开、字幕弹出）撑开容器，Grid track 高度会重算，影响后续行的对齐基准。
关键对策：
立即学习“前端免费学习笔记（深入）”；
