css - Div 环绕图像的边框超出了过去的图像

Question

我不确定这个标题是否有意义，但我会尽力解释。

我想在图像上添加一个 div，这很简单。我将图像包裹在一个 div 周围，然后从中给出诸如 top:, left:, 之类的东西。

然而，图像所在的这个 div 超出了实际图像的边界，一直延伸到父 div。我该怎么做才能使 div 的边框刚好环绕 div 内的实际图像。

黑色方 block 是一张图片。但是具有图像类的 div 没有环绕图像的边框。

<div id="page">

    <div class="image">
        <img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Black_300.jpg">
            <div class="innerimage"></div>
    </div>

</div>

Answer 1

将 display: inline-block 添加到 .image div:

display: inline-block;

http://jsfiddle.net/wwRhB/4/