html - 可缩放视频不制作网格

Question

我有这些视频，我正试图将它们放在一个网格中。每个视频都是 25%，因此连续有 4 个视频。这就是我得到的。

.qtvideo {
    position:relative;
    float:left;
    padding-bottom:56.25%;
    padding-top:25px;
    height:0;
}
.qtvideo iframe {
    position: absolute;
    top:0;
    left:0;
    width:25%;
    height:25%;
}

然后是我的 HTML。

<div class="qtvideo">
<iframe width="960" height="720" src="//www.youtube.com/embed/link" frameborder="0" allowfullscreen></iframe>
</div>

<div class="qtvideo">
<iframe width="960" height="720" src="//www.youtube.com/embed/link" frameborder="0" allowfullscreen></iframe>
</div>

我不明白为什么他们不挨着躺着。

Answer 1

正如您所说，您确实想多了。只需要 4 个宽度为 25% 的 div 以及宽度和高度都为 100% 的 iframe。然后将 div 向左浮动。完成!

HTML:

<div>
    <iframe src="//www.youtube.com/embed/link" frameborder="0" allowfullscreen></iframe>
</div>
<div>
    <iframe src="//www.youtube.com/embed/link" frameborder="0" allowfullscreen></iframe>
</div>
<div>
    <iframe src="//www.youtube.com/embed/link" frameborder="0" allowfullscreen></iframe>
</div>
<div>
    <iframe src="//www.youtube.com/embed/link" frameborder="0" allowfullscreen></iframe>
</div>

CSS:

iframe {
    width: 100%;
    height: 100%;
}
html, body {
    margin: 0;
}
div {
    float: left;
    width: 25%;
}

DEMO HERE