画像は、誰かが次のフィドルを見てとることができます

Question

コンテナのdivの境界を越えて：http://jsfiddle.net/R4bCy/1/

を私はdivのは、それは要素が絶対的に配置されていない限り、それは、要素だ対応するために、高さだ調整しなければならないと思いました。

divが画像の全高に拡大しないのはなぜですか？

右揃えにするには画像が必要です。私がこれを行う方法を知っている唯一の方法は、align='right'、position:absolute; right: 0;、およびfloat:rightです。これらのすべてが含まれているdivは画像の高さに合わせて高さを調整しません。

Answer 1

.intro { 
margin: 10px; 
outline: 1px solid #CCC; 
background: #A00; 
color: #FFF; 
height:auto; 
overflow:auto; 
} 
​.img{ 
float:right; 
height:auto; 
}​ 

<div class="intro"> 
    <div class="img"> <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s1600/tall+copy.jpg" style="margin: 10px 10px; "/></div> 

    <p>Sorry, but the page you requested could not be found.</p> 
</div>​​​​​​​​​​ 

DEMO

Answer 2

あなたの質問が投稿され、編集されました。私は信じています。浮動小数点の代わりにclearfixを使用してください。

例：http://jsfiddle.net/R4bCy/5/

Answer 3

あなたがする必要がある何が

<div style="clear:both;"></div> 

Answer 4

、pタグの後に追加されたこれは、私はあなたが欲しいと考えているものです： http://jsfiddle.net/R4bCy/6/

http://jsfiddle.net/R4bCy/15/

あなたはまた、コンテナdiv内に含まれる50％の幅を持つ2つのdiv Sを持つことができます：エド左のテキストと右に浮かべた画像は、これはあなたのCSSで行ってください。テキストと画像は、それぞれが独立した属性

Answer 5

で、独自の修正div秒を持っていますので、これはなぜdiv要素は、画像の完全な高さに拡大していない」あなたのイメージのプレースメントで、もう少し柔軟にできるようになります？ '

浮動小数点数はブロックと重複するため、ブロック書式設定コンテキストには浮動小数点数が含まれています。

では、当面の問題を解決する：

align=rightが実際にfloat: rightであるIMGになります（align属性は廃止されており、CSS：（http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/あなたはここで全体のトピックのかなり良い概要を見つけることができます）使用すべきです）。

は、あなたのようにスタイル設定され img後に追加の要素でフロートをクリアし、明示的にブロック書式コンテキストを確立する（ブロックフォーマッティングコンテキストは、ネストされた山車を囲む）、または親 divを持っているいずれかの必要な親 divに浮遊画像が含まれているために、 clear: right。この場合、私の好ましい解決法は、単にその overflow hiddenに（また、ブロックフォーマット化文脈をもたらす）を設定することであろうが

ブロック書式コンテキストを作成するための簡単な解決策は、同様に親divを浮遊することです。

更新されたフィドルhttp://jsfiddle.net/R4bCy/8/を確認してください。