CSS使div与内容大小保持一致

我有这样的代码：

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

这是一个很长的标题，应该换行。。。

我想要的是，外部div是图像的宽度，因此它下面的标题将换行到图像的宽度

这些图像的大小都不同，但无法在代码中访问该大小以给出绝对像素大小。css必须适用于不同的大小

我不能改变div的结构

可以这样做吗？

试试这个：

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>

演示

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

img {
    padding:10px;
}