-1

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」のマージン プロパティは、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

paddingiframe要素にスタイルを追加するのはどうですか

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 に答える