Question

我想在4个div中显示3个youtube iframe和1个段落。在桌面视图中，我希望它们在2X2上在响应时，我希望它们全部垂直对齐。

这是我的代码：

<style type="text/css">

.wrap_video {text-align: center; margin: 15px auto;}
.resp_video {display: inline-block; text-align: left; width: 33%; margin: 5% 5% 5% 5%;}
.resp_video.fixed {width: 100px; margin-right: 10px;}

</style>

<div class="wrap_video">
    <div id="a" class="resp_video"><iframe width="350" height="197" src="https://www.youtube.com/embed/ocQHSUALsOA" frameborder="0" allowfullscreen></iframe></div>
    <div id="b" class="resp_video"><iframe width="350" height="197" src="https://www.youtube.com/embed/P62o8O5KV6w" frameborder="0" allowfullscreen></iframe></div>
    <div id="c" class="resp_video"><iframe width="350" height="197" src="https://www.youtube.com/embed/GSKcBNEPcfU" frameborder="0" allowfullscreen></iframe></div>
    <div id="d" class="resp_video"> My paragraph<br/><br/><br/><br/></div>

当我查看自适应视图时，视频仍在一条水平线上，而不是另一条视线下的视频。

有人想知道如何解决这个问题吗？

由于

Answer 1

您可以在min-width课程中使用resp_video。然后，当它们达到该大小时，它们将不再缩小，从而将下一个内联块发送到下一行。 http://jsbin.com/fagujoyiqi/edit?html,output

youtube iframe的响应式排列？

1 个答案: