Question

我有这样的代码：

<div class='outer'>
<div class='imgwrapper'><img /></div>
<div class='caption'>This is a long caption that should wrap...</div>
</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/

CSS将div保持为内容的大小

1 个答案: