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

Question

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

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

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

如果外部div成为页面的宽度，则标题将跟随外部div的宽度，从而突出图像。

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

Answer 1

  

我不想手动设置外部div的宽度，因为我是   将此子模板用于所有形状和大小的图像   网站。反正有没有让外部的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);
}

Answer 2

也许只需将div宽度设为1px并执行overflow: visible

Answer 3

就是这样。与上面的答案不同，它可以在IE中使用：

<style type="text/css">
     .outerCont {height:auto;width:auto;position:relative;z-index:1;margin:0px auto;overflow:hidden;display:inline;float:left;}
     .outerCont img {height:auto;width:auto;position:relative;z-index:2;}
     .comment {height:auto;width:100%;display:block;font-family:Arial, Helvetica, sans-serif;text-align:center;padding:10px;0px;10px;0px;color:#FFF;position:absolute;z-index:3;bottom:0;/*also set your semi transparent black background-image here using the background-image property*/}
 </style> 

您可以这样使用它：

<div class="outerCont">
    <img src="flower.jpg" /> <!--Or where ever the image is located -->
    <div class="comment">
        <p>Hello</p>
    </div>
</div>

上面两种方式（我和其他人）的唯一问题是你牺牲了图像的中心。为了使图像居中，您必须使用jQuery创建JavaScript，并根据内部内容使用CSS属性更改宽度和高度。你要问的是我们'收缩包装'div的内容，这是你可以在3个特殊情况下做的事情。浮动对象，内联或内联块对象，以及绝对定位的对象。如果不使用JavaScript，Flolated和Absolute对象都无法居中，并且Inline Block在IE中无法正常运行，这意味着您需要使用display：inline;向左飘浮;它像内联块一样工作。您可以使用JavaScript将图像居中，就是这样。我可以提供该代码，但仅在要求时提供。