如何在不破坏浮动布局的情况下嵌入iframe?
我在我的浮动布局中嵌入了一个YT视频(iframe),它打破了浮动。正确的div完全从视图中消失。如何在不破坏浮动布局的情况下嵌入iframe?
它是一种简单的布局:
|内容|离开|中间| right |/content |
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;
}
您还没有与所需</iframe>
不错。甚至没有意识到。正试图与CSS玩。 – btevfik 2013-05-05 10:30:41
*脸掌*谢谢! – bengem 2013-05-05 10:31:08
np老兄。发生在我们身上:-) – Timidfriendly 2013-05-05 10:31:32
你有几个问题,你的标记:
- 的没有正确关闭。
-
#container
div未关闭(但可能是因为您没有复制最后一行)。 - 的
type
属性不存在。 -
frameborder
属性已弃用:使用CSS。
如果您需要嵌入YT视频,那么只需在视频下点击共享,然后点击嵌入式HTML即可。
谢谢,失踪的结束标记是根本问题。我从谷歌开发文档复制它似乎是不正确的.. https://developers.google.com/youtube/player_parameters#Embedding_a_Player – bengem 2013-05-06 10:03:35
对于谁是仍然有,即使在结束标记问题的人,尝试在坚守标签之间的东西,如:(为我工作)<iframe> </iframe>
这很有趣,但蜻蜓表明我拨弄不甚至输出最后(右)div的情况下,在中心有一个iframe(我的意思是这个div根本没有出现在我们在他们网站上看到的输出源中)。 – Cthulhu 2013-05-05 10:26:34