html iframe在多列中_Html_Css_Iframe_Youtube

html iframe在多列中

html css iframe youtube

html iframe在多列中,html,css,iframe,youtube,Html,Css,Iframe,Youtube,我正在写一个网站，收集我所有的东西（博客文章、YouTube视频等），并希望有一个YouTube嵌入页面。我想有两列嵌入，但不知道如何。如果我编辑css并使某些位浮动到正确的一侧，它不会改变任何内容。这就是我编辑的css的外观： div.leftBodyVideo{ width: 45%; float: left; } div.rightBodyVideo{ width: 45%; float: right; } 然后，我更改了html以正确对齐正确的标记，但这也不起作用。它将要右对

我正在写一个网站，收集我所有的东西（博客文章、YouTube视频等），并希望有一个YouTube嵌入页面。我想有两列嵌入，但不知道如何。如果我编辑css并使某些位浮动到正确的一侧，它不会改变任何内容。这就是我编辑的css的外观：

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

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

然后，我更改了html以正确对齐正确的标记，但这也不起作用。它将要右对齐的iFrame置于一个奇怪的位置：

以下是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>


吡拉明ao12 16 46

Cubicle.US |育新4x4+生寿吡拉明

教程-带立方体的sl1pg8r符号
鲁平大雁展池立方

立方体-2x2 ao5 36.9

Mindcuber演示和解释

如何修复此问题并使它们在两列中对齐

谢谢

您在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>

#leftBodyVideo{
宽度：45%；
显示：内联块；
}
#rightBodyVideo{
宽度：45%；
显示：内联块；
}
吡拉明ao12 16 46

Cubicle.US |育新4x4+生寿吡拉明

教程-带立方体的sl1pg8r符号
鲁平大雁展池立方

立方体-2x2 ao5 36.9

Mindcuber演示和解释

请参阅fiddle。

您在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>

#leftBodyVideo{
宽度：45%；
显示：内联块；
}
#rightBodyVideo{
宽度：45%；
显示：内联块；
}
吡拉明ao12 16 46

Cubicle.US |育新4x4+生寿吡拉明

教程-带立方体的sl1pg8r符号
鲁平大雁展池立方

立方体-2x2 ao5 36.9

Mindcuber演示和解释

请参阅fiddle。

看起来您尝试执行的操作有点像表格布局，因此请尝试将

divs

与

display:table

、

display:table row

和

display:table cell

一起使用

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

实时示例-请确保在运行此代码段后单击“完整页面”，以便您了解我的意思：

#表{
显示：表格；
}
.行{
显示：表格行；
}
.细胞{
显示：表格单元格；
填充：20px；
}


吡拉明ao12 16 46
鲁平大雁展池立方
Cubicle.US |育新4x4+生寿吡拉明
立方体-2x2 ao5 36.9
教程-带立方体的sl1pg8r符号
Mindcuber演示和解释

看起来您要做的事情看起来有点像一个表格布局，所以请尝试将

divs

与

display:table

、

display:table row

和

display:table cell

一起使用

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

实时示例-请确保在运行此代码段后单击“完整页面”，以便您了解我的意思：

#表{
显示：表格；
}
.行{
显示：表格行；
}
.细胞{
显示：表格单元格；
填充：20px；
}


吡拉明ao12 16 46
鲁平大雁展池立方
Cubicle.US |育新4x4+生寿吡拉明
立方体-2x2 ao5 36.9
教程-带立方体的sl1pg8r符号
Mindcuber演示和解释

尝试减少百分比，而不是45%，例如使用35%，依此类推，直到调整。尝试减少百分比，而不是45%，例如使用35%，依此类推，直到调整。您可以将

文本对齐：右

添加到#rightBodyVideo规则中，使所有内容都对齐到右侧。这将替换原始代码中的

align=“right”

。不同的排列方式，但仍然不起作用：（您好@MattyAB，我也对您的HTML进行了一些更改。我将为您将其添加到我的答案中。您可以将

text align:right

添加到#rightBodyVideo规则中，使所有内容都对齐到右侧。这将替换原始代码中的

align=“right”

。不同的安排，但仍然不起作用：（嗨@MattyAB，我也对你的HTML进行了一些更改。我会将其添加到我的答案中。这对我不起作用：（-不知道为什么，但它仍然在左列内联，并且实际上绘制了两次所有内容…@MattyAB您使用的浏览器是什么？我的实时演示在Chrome中显示了一个魅力。@MattyAB抱歉，原来我不小心复制了两次而不是一次代码。现在试试。我正在使用Chrome-实时演示可以工作，但当我放置它时，它不工作在页面的其余部分。@MattyAB那么问题在于页面的其余部分。页面的其余部分是什么样子的？这对我不起作用：（-不知道为什么，但它仍然在左列内联，并且实际上绘制了两次所有内容…@MattyAB您使用的浏览器是什么？我的实时演示在Chrome中显示了一个魅力。@MattyAB抱歉，原来我不小心复制了两次而不是一次代码。现在试试。我正在使用Chrome-实时演示可以工作，但当我放置它时，它不工作在页面的其余部分。@MattyAB那么问题在于页面的其余部分。页面的其余部分是什么样子的？