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

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

请尝试：

{{#each}}
<tr>
  <td>{{inline-edit}}</td>
</tr>
{{/each}}

请参阅小提琴here。

Answer 2

看起来你要做的事情看起来有点像桌面布局，所以尝试将divs与display: table，display: table-row和{{一起使用1}}。

然后你可以使用CSS来进一步设置单元格的样式，如果你愿意，可以给它们填充和文本对齐。

实际示例 - 请务必在运行此代码段后点击“完整页面”，以便了解我的意思：

display: table-cell

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

多列中的html iframe

2 个答案: