可扩展视频不制作网格

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

就像你说的那样你过去想过。只需要25%宽度的4个div和宽度和高度均为100%的iframe。然后漂浮divs左。完成！

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