让我先说一下，我知道我对这个特定项目的编码实践是不合标准的......我一直在急于完成这个项目（一个忙），并且稍后会修复它。
我的女朋友（http://fashiondahlia.com）有一个Wordpress网站，当用户点击菜单栏中的“视频”链接时，我正在使用Youtube数据API从她的YouTube频道加载/显示视频最佳。点击链接后，我加载了PHP和JQuery代码并在当前页面上显示半透明DIV，当前播放的视频（以及与之相关的一些数据）显示在此div的左侧，其余部分右侧显示的视频。这让我想到了我的问题：
我遇到了将3个div叠加在另一个上面的问题（在视频DIV的左侧窗格中），以便它们不会相互重叠，填充其父DIV的整个空间，并调整大小根据设备/浏览器大小（同时保持youtube视频的宽高比）;一个div包含当前所选视频的视频标题，另一个div包含来自youtube的实际iframe / embeded视频，底部包含当前播放视频的描述。
这是我目前用于创建整个合奏的代码（包括当前视频窗格和其他视频列表）：http://pastebin.com/dGNxpftC
...这些是CSS样式，用于维护页面中嵌入的YouTube视频的宽高比：http://pastebin.com/1Zmm5MpQ
我知道我的代码与所有内联CSS混乱，一旦完成项目，我将解决这个问题。
因此，用于维持视频宽高比的CSS样式似乎很明显影响了它下方的“描述”div（溢出到描述中），但我似乎无法弄清楚如何拥有youtube视频保持其大小比例，同时仍然与它下方的div很好地配合。标题div不是一个问题，因为它是一个固定的高度。
基本上，我希望TITLE DIV有一个固定的高度，VIDEO DIV用页面调整大小（同时保持它的宽高比），底部的DESCRIPTION DIV用来填充父级的剩余区域DIV（也动态调整大小）。可以这样做吗？请帮忙！谢谢！
答案 0 :(得分：0)
您可以尝试放置一个明确的div：both;在你想要堆叠的两个div之间。这应该可以防止重叠。
答案 1 :(得分：0)
尝试使用Bootstrap网格系统代替Arcade Basic进行响应式设计。 http://getbootstrap.com/css/#grid
然后，您可以使用视频的响应式嵌入来保持宽高比。 http://getbootstrap.com/components/#responsive-embed