-1

如何获得将 iFrame 与“p”标签分开的边距？

我在 div 中使用 iFrame (vimeo embed)。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”标签跨越页面的整个宽度。

如何获得将 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>
4

1 回答 1

0

如何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-25T02:07:14.580 回答