iFrame不佔用div中的空間

-1

如何獲得用於將iFrame與「p」標籤分開的餘量？iFrame不佔用div中的空間

我在div中使用了iFrame（vimeo嵌入）。 div包含iFrame，h2，p和h6標籤。

我希望視頻出現在div的左側，並且文本在右側。

爲了實現這一點，我將float：left應用於iframe。

頁面加載時，除了iFrame和文本div之間的邊距外，一切看起來都很好。

活生生的例子在這裏： http://mammola.info/HomePageTest/media/Testing.html

將「P」文本直接沿iFrame的邊緣猛了 - 在「P」的餘量屬性存在的iframe（同任何邊界）的後面。我無法獲得保證金或邊界將'p'和iFrame分隔開來當我檢查元素時，看起來iframe在正常定位中甚至沒有顯示出來。 'p'標籤跨越頁面的整個寬度。

我怎樣才能得到一個保證金來分隔'p'標籤的iFrame？

的jsfiddle這裏： http://jsfiddle.net/JrzS6/1/

<style> .portfolio-item { 
    text-align:center; 
} 
#iframecontainer { 
} 
iframe { 
    FLOAT:left; 
} 
.portfolio-item p { 
    text-align:left; 
    margin:40px; 
} 
</style> 

<div class="portfolio-item"> 
    <iframe width=500 height=281 src="//player.vimeo.com/video/46011352" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
    <h2> Title </h2> 

    <p>Stuff about the vidoe in the description. Stuff about the vidoe in the description. Stuff about the vidoe in the description. Stuff about the vidoe in the description.</p> 
    <h6> Creator | editor | Cinematographer </h6> 

</div>

來源

2013-09-25 Matthew J Mammola

如何添加padding風格iframe元素

http://jsfiddle.net/FJdPT/1/

<style> 
.portfolio-item { 
    text-align:center; 
} 

#iframecontainer { 
} 

iframe { 
    FLOAT:left; 
    padding: 20px; <!-- Added this --> 
} 

.portfolio-item p { 
    text-align:left; 
    margin:40px; 
} 

</style>

來源

2013-09-25 02:07:14 Jason

這似乎做到這一點！看起來像一個愚蠢的問題，現在...我發誓我嘗試過，但我猜不是。非常感謝！ –

iFrame不佔用div中的空間

回答

相關問題