将文本放在 youtube iframe 的右侧答案

【问题标题】：Put text just to the right of youtube iframe将文本放在 youtube iframe 的右侧
【发布时间】：2015-11-22 00:35:10
【问题描述】：

我对 HTML 和 CSS 非常陌生。我想在 youtube iframe 的右边放一些文字。我试过这段代码

.text {
  float: right;
}

<iframe width="200" height="100" src="//www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe>
<span class="text">Hello This is some textHello This is some textHello This is some textHello This is some textHello This is some textHello This is some textHello This is some textHello This is some textHello This is some textHello This is some textHello This is some textHello This is some textHello This is some textHello This is some text</span>

但这会从新行开始文本。我想从 iframe 的右上角开始文本。请帮助我如何实现这一目标？

【问题讨论】：

欢迎来到stackoverflow ;)
谢谢，这是我的第一个问题，我得到了我正在寻找的准确而快速的答案:)

标签： javascript html css iframe

【解决方案1】：

将width 给.text。

.text {
  float: right;
  width:50%;
}

<iframe width="200" height="100" src="//www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe>
<span class="text">Hello This is some textHello This is some textHello This is some textHello This is some textHello This is some textHello This is some textHello This is some textHello This is some textHello This is some textHello This is some textHello This is some textHello This is some textHello This is some textHello This is some text</span>

【讨论】：

【解决方案2】：

这样做http://jsfiddle.net/ak8u7k3n/

iframe {
  float: left;
}

并从.text 中删除float:right;

【讨论】：

但是当他的分辨率是 768px 时会发生什么？无论从哪种意义上说，他甚至都不接受答案（如果您需要@Ravi，您应该接受），但是您更改了元素尺寸，并且真的恕我直言，将其设置为重复问题。如果 OP 能够阅读规则和元素布局基础知识会更好，尤其是尝试使用 span 作为块元素。

【解决方案3】：

好的，首先我们有一个基本问题。我知道你是初学者，所以我会解释。

1 这很重要 iframe 是固定宽度的，所以我不知道您的完整实施计划，但看起来您想要进行 2 列设计。简单地浮动一个元素不会这样做。

您需要创建 3 个元素：1 个作为包装器，1 个作为左列，1 个作为右列

第二个，这很重要 span 标签是内联声明而不是块行，通常仅用于块行声明，例如：

<div>
<span>my text</span>Text with out span rules
</div>

如果不参与现场项目，我无法给出确切的解决方案，但这是调试方法

1) 在 iframe 上方使用块行元素。 1a）如果您打算让元素与 iframe 重叠，您还需要使用边距规则

margin: topValue rightValue bottomValue leftValue;

2) 如果您需要文本也右对齐，请使用 text-align: value;规则

3) 如果移动时文本位于 iframe 后面，则需要使用 z-index: 值；规则

旁注：您的类是 CSS 语法中的“文本”或 .text。这不会影响文本对齐。为此，您还需要文本对齐。因为你只使用 float 它只会影响元素而不是元素内的节点。

【讨论】：