부동 한 줄이없는 한 줄의 부동 DIVs

Question

<div style="background: green; float: right;"> 
    <div style="background: yellow;"> 
    <img style="float: left; width: 80px;" src="image.png" /> 
    <div style="background: red; float: left;"> 
     <p>Text 1</p> 
     <p>Text 2</p> 
     <p>Text 3</p> 
    </div> 
    </div> 
</div> 

빨간색 div는 이미지 아래에 계속 표시됩니다. red div의 단락에있는 텍스트의 너비가 너비를 지정하도록합니다. 이미지와 빨간색 div를 나란히 배치해야하지만 노란색과 빨간색 div 둘 다 고정 폭을 제공하고 싶지 않습니다. 이미지에 맞게 노란색 div의 자동 동적 너비와 한 줄에 빨간색 div가 필요합니다.

Answer 1

음 ... 코드가 원하는 방식으로 작동합니다. 단락에 더 많은 내용을 추가하여 빨간색 div가 내용을 수용하도록 확장되었음을 알 수 있습니다. 이미지는 단락과 나란히 표시됩니다. http://jsbin.com/atozim/1

것은 그냥 당신이 당신의 HTML 구조가 표시되는 방법을 방해하는 다른 CSS 규칙이없는 있는지 확인하십시오

<div style="background: green; float: right;"> 
    <div style="background: yellow;"> 
    <img style="float: left; width: 80px;" src="http://www.google.com/doodle4google/images/carousel-winner2012.jpg" /> 
    <div style="background: red; float: left;"> 
     <p>Text 1234567910</p> 
     <p>Text 23456789101111111</p> 
     <p>Text 3</p> 
    </div> 
    </div> 
</div> 

여기 JS 빈에서 데모입니다.