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中的空间

回答

相关问题