html - 当导航栏向左浮动且导航栏向右浮动时，如何使嵌入的 youtube 视频随页面缩小

Question

我目前正在我的网站上创建一个页面，其中放置了一个导航栏（float：right）和一个导航栏（float：left），但是每当我尝试嵌入 youtube 视频时，右侧导航栏最终位于页面底部。有谁知道我可以使用什么 css 代码来解决这个问题？这是我目前拥有的：Html：

<div class="video-wrapper"> 
<iframe width="700" height="525" src="http://www.youtube.com/embed/MYN5aBPmpZE?rel=0"     frameborder="0" allowfullscreen></iframe>
</div>

CSS：

    .videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Answer 1

詹姆斯 首先，这个问题有点模棱两可，因为你说导航栏 {float:left} 和同一个导航栏再次向右浮动。但是我假设它们是不同的导航栏。但如果它们相同，那么这个概念就有问题。

检查您的代码，css 代码有一个名为 videoWrapper 的类，但您将 video-wrapper 分配给了 youtube 视频 iframe。由于该视频包装器未在 css 文件中定义，因此浏览器将其呈现在默认的 flowlayout 中。尝试更改类名以使它们保持一致。