如何在不破坏浮动布局的情况下嵌入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; 
}

来源

2013-05-05 bengem

这很有趣，但蜻蜓表明我拨弄不甚至输出最后（右）div的情况下，在中心有一个iframe（我的意思是这个div根本没有出现在我们在他们网站上看到的输出源中）。 – Cthulhu 2013-05-05 10:26:34

您还没有与所需</iframe>

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

正确关闭了iframe

来源

2013-05-05 10:28:16 Timidfriendly

不错。甚至没有意识到。正试图与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即可。

来源

2013-05-05 10:34:26

谢谢，失踪的结束标记是根本问题。我从谷歌开发文档复制它似乎是不正确的.. https://developers.google.com/youtube/player_parameters#Embedding_a_Player – bengem 2013-05-06 10:03:35

对于谁是仍然有，即使在结束标记问题的人，尝试在坚守标签之间的东西，如：（为我工作）<iframe> </iframe>

来源

2013-08-10 20:09:07

如何在不破坏浮动布局的情况下嵌入iframe？

回答

相关问题