CSS는이 같은 코드를 내용

Question

의 크기에 DIV를 유지 : 그 아래 캡션 폭에 랩 있도록 외부 DIV 이미지의 폭이 될 수 있도록

<div class='outer'> 
<div class='imgwrapper'><img /></div> 
<div class='caption'>This is a long caption that should wrap...</div> 
</div> 

내가 원하는 것은 이미지의

이미지의 크기는 모두 다르지만 코드에서 절대 픽셀 크기를 제공하기 위해 크기에 액세스 할 수 없습니다. CSS는 다른 크기로 작동해야합니다.

div의 구조를 변경할 수 없습니다.

이 작업을 수행 할 수 있습니까?

Answer 1

이 시도 :

HTML

<div class="box"> 
    <img src="http://static.howstuffworks.com/gif/moon-landing-hoax-1.jpg" /> 
    <div class="caption"> 
     Caption 
    </div> 
</div><br /> 

<div class="box"> 
    <img src="http://static.howstuffworks.com/gif/moon-landing-hoax-1.jpg" style="width:200px; height:200px;"/> 
    <div class="caption"> 
     Caption 
    </div> 
</div><br /> 

<div class="box"> 
    <img src="http://static.howstuffworks.com/gif/moon-landing-hoax-1.jpg" style="width:75px; height:75px;"/> 
    <div class="caption"> 
     Caption 
    </div> 
</div> 

CSS

.box { 
    overflow:hidden; 
    background-color:#ddd; 
    display:inline-block; 
} 

img { 
    padding:10px; 
} 

데모

http://jsfiddle.net/andresilich/8Bsgg/1/