HTML视频播放列表结构_HTML右侧选集布局方法-html教程-PHP中文网

flex布局最稳，左侧需设flex-shrink:0和box-sizing:border-box，右侧禁用width:100%；视频容器须套div设aspect-ratio，video本身用absolute+object-fit；列表点击需统一状态管理，动态新增项要控grid-auto-rows和align-self。

html视频播放列表结构_html右侧选集布局方法

右侧视频列表 + 左侧播放器的布局，用 display: flex 最稳，grid 次之；但写错一个属性，小屏下列表就缩成一条竖线，或点击后视频不加载。

左侧固定宽度、右侧自适应用 flex 布局时必须加 `flex-shrink: 0`

很多人直接写 .sidebar { width: 240px; } + .main { flex: 1; }，结果小屏下左侧被压缩、右侧文字换行错乱。根本原因是没阻止左侧收缩——flex-shrink: 0 才是关键。

flex-shrink: 0 必须显式声明，否则默认为 1，浏览器会按内容挤压左侧宽度
如果左侧有 padding 或 border，务必配 box-sizing: border-box，否则实际宽度超 240px
右侧不要设 width: 100%，它会和 flex: 1 冲突，导致布局断裂
移动端可加 @media (max-width: 768px) { .container { flex-direction: column; } } 切换为上下堆叠

右侧列表项点击高亮 + 播放对应视频的 DOM 绑定要点

每个

要当单选按钮用，但原生 click 和 mouseenter 混用容易状态错乱。重点不是“怎么加事件”，而是“怎么避免重复绑定和残留”。

首次加载后，只对第一个
调用 video.load() + video.play()，否则部分浏览器会报 NotAllowedError
点击某项时，先遍历所有
移除 active 类，再给当前项加类；别依赖 event.target 的父级判断，DOM 结构微调就失效
mouseenter 只用于显示播放图标（如加 ::after），别在里面调 play() —— 鼠标划过就自动播，体验极差
更换 video.src 后，必须紧跟 video.load()，否则新地址可能缓存旧元数据，导致时长/封面不更新

`aspect-ratio: 16 / 9` 在视频容器上失效的常见原因

写了 aspect-ratio 却还是拉伸变形？大概率是作用对象错了——它不能直接写在上，而要套一层容器。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

元素本身设 height: 100% 会无视 aspect-ratio，必须删掉
正确结构：外层 设 aspect-ratio: 16 / 9 + position: relative，设 position: absolute; width: 100%; height: 100%; object-fit: cover
Safari 15.3 以下不支持 aspect-ratio，需降级：用 padding-top: 56.25% + 伪元素撑高，且父容器必须有 position: relative


某些安卓 WebView 对 aspect-ratio 计算异常，加 min-height: 0 可修复 Grid 轨道高度塌陷
动态插入新列表项后 Grid 行高不重排的问题
用 JS 往右侧列表里 append() 新项，发现整行被拉高、左侧视频错位——这不是 Grid 失效，而是你没控制好轨道行为。

别用 grid-auto-rows: 1fr，它会让每行强制等高；改用 grid-auto-rows: minmax(min-content, max-content)

给每个列表项加 align-self: start，防止被父轨道居中拉高
如果列表项内部用了 display: flex，检查是否意外继承了 align-items: stretch，这会让子元素撑满整行高度
新增项后无需手动设 grid-row，Grid 默认按源顺序排列；除非跨行，否则加了反而破坏流式布局

最易忽略的是：右侧列表容器的 box-sizing 和左侧视频容器的 position 层级。一个漏了 border-box，整个宽度溢出；一个忘了 relative，absolute 视频就飞出视口。这些细节不报错，但一上线就错位。