html - html iframe在多列中

Question

我正在写一个网站来收集所有内容(博客文章，YouTube视频等)，并希望有一个YouTube嵌入页面。我想嵌入两列，但无法弄清楚该怎么做。如果我编辑CSS并使某些位浮到正确的一侧，则它什么也不会改变。这是我编辑的CSS的样子:

    div.leftBodyVideo{
width: 45%;
float: left;
}

div.rightBodyVideo{
width: 45%;
float: right;
}

然后，我更改了html以正确对齐正确的标签，但这也不起作用。它将原本应该正确对齐的iframe放在一个奇怪的位置:

https://lh3.googleusercontent.com/-sur00UJ5A2c/Vb-7rkMrGlI/AAAAAAAAAHk/ZO3CpEcpoQ4/w426-h237/Capture.PNG

这是html:

    <div id="leftBodyVideo">
    <h5>Pyraminx ao12 16 46</h5>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/XDN9BXLFGhg" frameborder="0" allowfullscreen></iframe>
    <br><h5>TheCubicle.US | Yuxin 4x4 + ShengShou pyraminx</h5>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/vEkiT62B-nE" frameborder="0" allowfullscreen></iframe>
    <br><h5>Tutorial - sl1pg8r symbol with a cube</h5>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/2f7xz6ym__0" frameborder="0" allowfullscreen></iframe>
</div>

<div id="rightBodyVideo">
    <h5 align="right">Lubing DaYan ZhanChi Cube</h5>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/ydg0APsB7IU" frameborder="0" align="right" allowfullscreen></iframe>
    <br><h5 align="right">Cubing - 2x2 ao5 36.9</h5>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/ydg0APsB7IU" frameborder="0" align="right" allowfullscreen></iframe>
    <br><h5 align="right">Mindcuber Demo and Explaination</h5>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/oEIMf1JdyDc" frameborder="0" align="right" allowfullscreen></iframe>
</div>

如何解决此问题并使它们对齐2列？

谢谢!

Answer 1

看起来您想要做的事情看起来像是表格布局，因此请尝试将divs与display: table，display: table-row和display: table-cell结合使用。

然后，您可以使用CSS进一步设置单元格的样式，如果需要，可以为它们提供填充和文本对齐。

实时示例-运行此代码段后，请务必单击“整页”，以便您了解我的意思:

#table {
    display: table;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    padding: 20px;
}

<div id="table">
   <div class="row">
      <div class="cell">
         <h5>Pyraminx ao12 16 46</h5>
         <iframe width="560" height="315" src="https://www.youtube.com/embed/XDN9BXLFGhg" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="cell">
         <h5 align="right">Lubing DaYan ZhanChi Cube</h5>
         <iframe width="560" height="315" src="https://www.youtube.com/embed/ydg0APsB7IU" frameborder="0" align="right" allowfullscreen></iframe>
      </div>
   </div>
   <div class="row">
      <div class="cell">
         <h5>TheCubicle.US | Yuxin 4x4 + ShengShou pyraminx</h5>
         <iframe width="560" height="315" src="https://www.youtube.com/embed/vEkiT62B-nE" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="cell">
         <h5 align="right">Cubing - 2x2 ao5 36.9</h5>
         <iframe width="560" height="315" src="https://www.youtube.com/embed/ydg0APsB7IU" frameborder="0" align="right" allowfullscreen></iframe>
      </div>
   </div>
   <div class="row">
      <div class="cell">
         <h5>Tutorial - sl1pg8r symbol with a cube</h5>
         <iframe width="560" height="315" src="https://www.youtube.com/embed/2f7xz6ym__0" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="cell">
         <h5 align="right">Mindcuber Demo and Explaination</h5>
         <iframe width="560" height="315" src="https://www.youtube.com/embed/oEIMf1JdyDc" frameborder="0" align="right" allowfullscreen></iframe>
      </div>
   </div>
</div>