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>

我该如何解决这个问题并使它们对齐成两列？

谢谢！

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>

Answer 2

您在 HTML 中使用 id，但随后在 CSS 中使用类选择器，因此您的样式永远不会应用。

请尝试：

#leftBodyVideo{
 width: 45%;
 display: inline-block;
}

#rightBodyVideo{
width: 45%;
display: inline-block;
}

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

参见小提琴这里。