html - iframe を親に合わせる

Question

私のサイトは 4 つのセクションに分かれており、各セクションには h3 と<p>. のすべてのコンテンツ<p> は中央に配置されmargin-left: auto; margin-right: auto;、背景色と境界線も含まれています。もその<p>コンテンツとともに自動的に成長します。

の1つは<p>中央揃えのiframeですが、左に揃える必要があります。iframe が の幅よりも小さいです<p>。

float: left は機能しますが、iframe は<p>. だから私<p>はちょうどオンラインで、iframeはそこから浮かんでいます。

なぜこれが起こるのか分かりますか？

http://jsfiddle.net/dennym/KBSzh/

Answer 1

追加してみてください:

#another p { overflow: hidden; }

更新されたフィドル: http://jsfiddle.net/KBSzh/13/

Answer 2

ここで、フィドルを更新しました：

http://jsfiddle.net/KBShz/14/

これが発生する理由は、ブラウザーが浮動要素を処理する方法が原因です。それらは異なる動作をし、コンテナーはそれらに合わせて拡張されなくなります。text-align: leftそのような場合に代わりに 使用してください。

<div style="clear:both"></div>他の状況では、コンテナ div の最後に a を配置して、コンテンツに合わせて拡大するように指示する 必要がある場合があります。