用 display: flex 最稳，别碰 float 或 inline-block；三个视频并排需不换行、等宽、自适应，flex 通过 gap、flex:1 和 width:100% 实现，配合 min-width:0 防溢出，移动端用媒体查询断行，跨域视频须加 crossorigin="anonymous"。
用 display: flex 最稳，别碰 float 或 inline-block
三个视频并排显示，核心是让它们“不换行+等宽+自动适应容器”。flex 是现代浏览器里最可靠的选择，float 容易塌陷、需要清浮动；inline-block 有空白符间隙，调起来反而更费劲。
实操建议：
- 给父容器加
display: flex和gap: 8px（控制间距，比margin更干净） - 每个
<video></video>设置flex: 1，让它均分剩余空间；如果要固定宽度，就用width: 300px这类具体值 - 加
min-width: 0到<video></video>上——否则在小屏下可能溢出或撑破布局（这是最容易被忽略的兼容点）
<video></video> 标签本身要设 width: 100% 才能响应式填充
默认情况下 <video></video> 是内联元素，有自己的固有尺寸（比如 320×240），不设宽高就不会随父容器缩放。即使用了 flex，它也可能只占原始大小，右边留白。
常见错误现象：三个视频挤在左上角，右边大片空白；或者高度塌陷成一条线。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 每个
<video></video>必须写width: 100%，同时加height: auto保持比例 - 如果希望统一高度（比如都高 180px），那就用
height: 180px; width: auto，但注意宽高比失真风险 - 别依赖
controls属性来“撑开”尺寸——它不影响布局盒模型
移动端小屏下要主动断行，不能硬撑三列
在手机上强行三列会触发横向滚动，用户得左右拖，体验极差。这不是“没写对”，而是没做响应式兜底。
使用场景：你发到内部系统，用户可能用 iPad 查看；也可能是公开页面，必须适配 iPhone SE。
实操建议：
- 用媒体查询，在视口
max-width: 768px时把父容器改成flex-direction: column - 或者更简洁：直接用
flex-wrap: wrap+flex-basis: calc(33.333% - 8px)，再配合@media把flex-basis改成100% - 测试时真机打开 Safari / Chrome，别只靠浏览器调试器的“响应式模式”——它对
flex-wrap模拟不准
如果视频来自不同源，注意 crossorigin 可能影响播放控制
三个视频路径不同（比如一个本地，两个 CDN），有些 CDN 默认不带 CORS 头。这时调用 play() 或读取 duration 会静默失败，控制条灰掉、进度条不动——看着像布局问题，其实是安全策略拦截。
错误信息示例：DOMException: The element has no supported sources 或控制台出现 Blocked a frame with origin ... from accessing a cross-origin frame
实操建议：
- 所有跨域视频标签加上
crossorigin="anonymous" - 确认 CDN 返回头含
Access-Control-Allow-Origin: *（不是Access-Control-Allow-Origin: null） - 本地开发时若用
file://协议，Chrome 会直接禁跨域请求——必须起个本地服务（如npx serve）
实际布局中最容易被绕进去的，是把视频当图片处理，忘了它自带播放逻辑和尺寸继承规则。尤其 min-width: 0 和 crossorigin 这两点，查半天样式，最后卡在 DOM 层面。
