CSS保持股利的内容

Question

大小我有这样的代码：

<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/