问题描述
我将这些视频“发布”到我正在构建的网站上。 前两个视频对齐正确（或者我认为），但之后的每个视频都重叠，我不明白为什么有人可以提供帮助或提供建议？ 我已经尝试添加样式只是为了临时修复，但是当我插入代码时它会在屏幕上移动。
.embed-container { position: sticky; width: 100%; height: 0; padding-bottom: 56.27198%; background-size: cover; background-repeat: no-repeat; } .embed-container iframe { position: absolute; margin: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); }
<div class='embed-container'> <iframe src="https://www.youtube.com/embed/GT_J4eEnmG4" " allowfullscreen="allowfullscreen" width="70%" height="100%" align="center"> </iframe> </div> <div class='embed-container'> <iframe src="https://www.youtube.com/embed/_5Jwb0Ophdc"" allowfullscreen="allowfullscreen" width="50%" height="150%" align="center"> </iframe> </div> <div class='embed-container'> <iframe src="https://www.youtube.com/embed/PVY4wjF_lvo"" allowfullscreen="allowfullscreen" width="60%" height="70%" align="center" > </iframe> </div> <div class='embed-container'> <iframe src="https://www.youtube.com/embed/hXg78e7L3I8" " allowfullscreen="allowfullscreen" width="70%" height="100%" align="center"> </iframe> </div> <div class='embed-container'> <iframe src="https://www.youtube.com/embed/vRE9XwMmg_o" " allowfullscreen="allowfullscreen" width="50%" height="150%" align="center"> </iframe> </div> <div class='embed-container'> <iframe src="https://www.youtube.com/embed/EgdO6DxBAvI" " allowfullscreen="allowfullscreen" width="50%" height="150%" align="center"> </iframe> </div> <div class='embed-container'> <iframe src="<iframe width="916" height="515" src="https://www.youtube.com/embed/6zSRRfevpRw" " allowfullscreen="allowfullscreen" width="50%" height="150%" align="center"> </iframe> </div>
1楼
我认为你的视频之间没有任何边距。在你的嵌入容器类中添加margin-bottom ，它应该可以工作。
您应该研究网格系统或 flexbox 来进行布局，我认为这将是一个更持久的解决方案。
现在只需使用此更改您的嵌入容器类。您还可以根据需要调整边距。
.embed-container {
position: sticky;
width: 100%;
height: 0;
padding-bottom: 56.27198%;
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 20%;
}
希望这会有所帮助，如果您有更多疑问，请告诉我。