Question

我是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的右上角开始播放文本。请帮我解决这个问题？

Answer 1

将width提交给.text。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只需执行此操作http://jsfiddle.net/ak8u7k3n/

iframe {
  float: left;
}

并从float:right;

中删除.text

Answer 3

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

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

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

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

margin: topValue rightValue bottomValue leftValue;

如果没有处理实时项目，我无法准确提供解决方案，但这里是调试方法

1）在iframe上方使用一个块线元素。 1a）如果您打算让元素与iframe重叠，您还需要使用保证金规则

.left-nav{width:20%}

@media screen and (max-width 800;){
.left-nav{display:none}
}

2）如果您需要将文本右对齐，请使用text-align：value;规则

3）如果移动后文本在iframe后面，则需要使用z-index：value;规则

SIDENOTE：你的课程是＆＃34;文字＆＃34; CSS语法中的。或.text这不会影响文本对齐。为此，您还需要文本对齐。因为你只使用浮点数，它只会影响元素而不影响元素内的节点。

将文本放在youtube iframe的右侧

3 个答案: