Question

如何获得将iFrame与'p'标签分开的保证金？

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

我希望视频显示在div的左侧，而文本则显示在右侧。

为此，我将float：left应用于iframe。

页面加载后，除了iFrame和文本div之间的边距外，一切看起来都很好。

这里的实例： http://mammola.info/HomePageTest/media/Testing.html

'p'文本直接沿着iFrame的边缘推进 - 'p'的margin属性存在于iframe后面（与任何边框相同）。我无法将'p'和iFrame

分隔开来

当我检查元素时，似乎iframe甚至没有出现在正常定位中。 'p'标签跨越页面的整个宽度。

如何获得将iFrame与'p'标签分开的保证金？

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>

Answer 1

如何将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>

iFrame不占用div中的空间

1 个答案: