php - 嵌入式 Youtube 视频的响应式布局问题

Question

首先让我说我意识到我对这个特定元素的编码实践是不合标准的...我一直急于完成这个元素(帮个忙)，稍后会解决这个问题。

我有一个给我女朋友的 Wordpress 网站 ( http://fashiondahlia.com )，当用户点击顶部菜单栏中的“视频”链接时，我正在使用 Youtube 数据 API 加载/显示来自她的 youtube channel 的视频。单击链接后，我将加载 PHP 和 JQuery 代码并在当前页面上显示一个半透明的 DIV，当前播放的视频(以及与其相关的一些数据)显示在该 div 的左侧，其余的右侧显示的视频。这让我想到了我的问题:

我在将 3 个 div 堆叠在一起时遇到问题(在视频 DIV 的左 Pane 中)，这样它们就不会彼此重叠，填充它们父 DIV 的整个空间，并调整大小根据设备/浏览器大小(同时保持 YouTube 视频的纵横比)；一个 div 包含当前所选视频的视频标题，另一个包含来自 youtube 的实际 iframe/嵌入视频，底部包含对当前播放视频的描述。

这是我目前用于创建整个整体的代码(包括当前视频 Pane 和其他视频列表):http://pastebin.com/dGNxpftC

...这些是用于保持页面中嵌入的 youtube 视频的纵横比的 CSS 样式:http://pastebin.com/1Zmm5MpQ

我知道我的代码因所有内联 CSS 而变得一团糟，我会在完成元素后解决这个问题。

所以，很明显，用于保持视频宽高比的 CSS 样式正在影响其下方的“描述”div(溢出到描述上)，但我似乎无法弄清楚如何让youtube 视频保持其大小比例，同时仍能很好地播放其下方的 div。标题 div 不是真正的问题，因为它是固定高度。

基本上，我希望 TITLE DIV 具有固定高度，VIDEO DIV 随页面调整大小(同时保持其纵横比)，底部的 DESCRIPTION DIV 填充父级的剩余区域DIV(也动态调整大小)。这可以做到吗？请帮忙!谢谢!

Answer 1

您可以尝试使用 clear:both; 放置一个 div；在要堆叠的两个 div 之间。这应该可以防止重叠。