在封闭图像周围紧贴<div>？

Question

情况是我有一个img,我想要一个pop-over标题框,其宽度是img的宽度.我不能将标题添加为img的子项,因为img标签不带孩子.因此我的想法是这样的:

<div>
   <img/>
   <div>
      ...caption...
   <div>
</div>

问题是外部div扩展以填充其父级的宽度,就像块元素一样,因此caption-div变得同样宽,我得到的东西看起来像这样:

如果外部div成为页面的宽度,则标题遵循外部div的宽度,从而伸出图像.

我不想手动设置外部div的宽度,因为我在整个站点上使用此子模板来显示所有形状和大小的图像.反正有没有让外部拥抱图像,而不是填补他的父母？

Answer 1

我不想手动设置外部div的宽度,因为我在整个站点上使用此子模板来显示所有形状和大小的图像.反正有没有让外部拥抱图像,而不是填补他的父母？

你需要display: inline-block结合text-align: center.

请参阅: http ://jsfiddle.net/thirtydot/V3XyK/

HTML:

<div class="imageContainer">
    <div>
        <img src=".." />
        <span>...caption...</span>
    </div>
</div>

CSS:

.imageContainer {
    text-align: center;
}
.imageContainer img {
    display: block;
}
.imageContainer div {
    position: relative;
    display: inline-block;
    /* if you need ie6/7 support */
    *display: inline;
    zoom: 1;
}
.imageContainer span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #000;
    background: rgba(0,0,0,.5);
}