css - 하나의 자식의 너비에 맞게 부모 div를 축소하고 다른 자식의 너비를 제한

Question

부모 div에는 두 개의 자식 div가 있습니다. 하나는 텍스트를 포함하고 다른 하나는 알려진 (그러나 가변적 인) 너비의 이미지를 포함합니다. & height .

내가

• 첫 번째 자식의 폭을하려는

  (이미지 포함) 지정되지 않은 폭 (이미지의 폭 (이 내가 할 수있는)

• 부모 DIV에 맞게 축소 사업부를) 포함 이미지의 너비에 맞게 축소 div (이것은 너무 좋다)
• 포함 된 텍스트의 양에 관계없이 부모 div의 너비와 일치하는 텍스트 포함 두 번째 자식 div (또한 지정되지 않은 너비) 이것은 까다로워지는 곳입니다.)

는 내가 두 번째 아이의 텍스트 때까지 양을 원하는 이미지보다 부모 DIV의 폭이 넓어 진행시키고 않는 작업 버전이있다. 여기

내 코드입니다 :

CSS :

는 HTML

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

: 여기

<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을 참조하십시오. 당신은 약간의 자바 스크립트 (이 예에서는 jQuery를) 사용하고자하는 경우

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

Answer 2

, 당신은 이미지의 너비와 텍스트 DIV의 폭을 설정할 수 있습니다 :

다음은 CSS에 추가되는거야 div.

에 한번 당신의 바이올린에 JS의 끝에 $("#child2").css({'width': $('#child1').width()});를 추가하거나 여기에 포크 체크 아웃 : http://jsfiddle.net/VXEMu/