css - 1つの子の幅に合わせて親divを縮小し、もう1つの子の幅を制限する

Question

親のdivには、テキストを含む2つの子divがあり、もう1つは既知の（しかし可変の）幅の画像を含むとします。& height 。

私は

• 最初の子（画像を含む）の幅div要素画像の幅に合わせて縮小する（これ、私が行うことができます）
• 不定幅の親のdiv（たい）は、画像を含むdivの幅に合わせて縮小します（これもOKです）。
• テキストを含む第2の子div（指定されていない幅のもの）は、そのテキストの量に関係なく親divの幅に一致しますこれは難しいです）。

私は第二子のテキストのまでの量、私が何をしたいん作業バージョンを持っているが、画像よりも広い、親のdivの幅をプッシュします。

CSS：

#container{border:1px solid #f00;display:inline-block;} 
#child1{border:1px solid #0f0;} 
#child2{border:1px solid #00f;} 
img {border:1px solid #000;} 

は、HTML：

<div id="container"> 
<div id="child1"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div> 
<div id="child2">Lorem ipsum dolor sit amet.</div> 
</div> 

、ここではjsfiddleです：ここでは

は私のコードです http://jsfiddle.net/BmbAS/1/

あなたはクリックすることで、それは間違って起こっている場所を確認することができますqを大きくするために「テキストの長さ/短く」リンクテキスト

tldrのuantity - 私はすべてのdivは、画像

PSの幅に等しい同じ幅になりたいです。最新のブラウザソリューションのみ必要

Answer 1

jsFiddleのthis edited versionを参照してください。ここで

は、CSSに追加しているものです：

#container { 
    display: table-cell; 
} 
#child1 { 
    display: table-row; 
    width: 1px; 
} 
#child2 { 
    display: table-cell; 
    width: 1px; 
} 

Answer 2

あなたは少しのJavaScript（この例では、jQueryの）を使用して喜んでいる場合は、画像の幅とテキストのdivの幅を設定することができますdiv。

てみあなたのフィドルにJSの最後に$("#child2").css({'width': $('#child1').width()});を追加、またはここにフォークをチェックアウト：http://jsfiddle.net/VXEMu/