1

我在浮动布局中嵌入了一个 YT 视频(iframe),它破坏了浮动。右 div 完成从视图中消失。

它是一个简单的布局:


|内容| 离开 | 中间 | 对 | /内容 |

小提琴

HTML

<div id="container">
<div id="content">
    <div id="left"></div>
    <div id="middle">
        <iframe id="ytplayer" type="text/html" width="200" height="180" src="http://www.youtube.com/embed/CTAud5O7Qqk?autoplay=1" frameborder="0" />
    </div>
    <div id="right"></div>
</div>

CSS

#container {
width: 100%;
background-color: gray;
height: 200px;
}
#left {
width: 25%;
height: 190px;
background-color: green;
float: left;
}
#middle {
height: 190px;
width: 50%;
background-color: purple;
float: left;
}
#right {
width: 25%;
height: 190px;
background-color: orange;
float: left;
}
#content {
width: 80%;
height: 200px;
margin: auto;
}
4

3 回答 3

3

您没有使用所需的正确关闭 iframe</iframe>

http://jsfiddle.net/David_Knowles/vkhse/

于 2013-05-05T10:28:16.850 回答
1

您的标记存在一些问题:

  1. <iframe>没有正确关闭。
  2. div 没有关闭(#container但可能是您没有复制最后一行)。
  3. type属性<iframe>不存在。
  4. frameborder属性已弃用:使用 CSS。

如果您需要嵌入 YT 视频,只需点击分享,然后点击视频下方的嵌入 HTML。

于 2013-05-05T10:34:26.673 回答
0

对于即使使用结束标签仍然有问题的任何人,请尝试在标签之间粘贴一些东西,例如:<iframe>&nbsp;</iframe>

(为我工作。)

于 2013-08-10T20:09:07.663 回答