如何在不破壞浮動佈局的情況下嵌入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？

回答

相關問題