Html 将 <div> 紧紧地放在封闭的图像周围？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7178537/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fit <div> tightly around enclosed image?
提问by Li Haoyi
The situation is I have an img and I want a pop-over caption-box whose width is the width of the img. I can't add the caption as a child of the img, because img tags don't take children. Hence my idea was to have something like this:
情况是我有一个 img 并且我想要一个弹出式标题框，其宽度是 img 的宽度。我无法将标题添加为 img 的子项，因为 img 标签不带子项。因此我的想法是有这样的东西：
<div>
<img/>
<div>
...caption...
<div>
</div>
The problem is the outer divs expand to fill the width of their parent, as block elements do, and hence the caption-div becomes equally wide, and I get something that looks like this:
问题是外部 div 扩展以填充其父级的宽度，就像块元素一样，因此标题 div 变得同样宽，我得到如下所示的内容：
Where the outer div becomes the width of the page, the caption follows the width of the outer div and thus sticks out of the image.
在外部 div 成为页面宽度的情况下，标题跟随外部 div 的宽度，因此伸出图像。
I do not want to manually set the width of the outer div, because I am using this sub-template for images of all shapes and sizes all over the site. Is there anyway to make the outer-div hug the image, rather than fill his parent?
我不想手动设置外部 div 的宽度，因为我将此子模板用于整个网站上各种形状和大小的图像。有没有办法让外部 div 拥抱图像，而不是填充他的父母？
回答by thirtydot
I do not want to manually set the width of the outer div, because I am using this sub-template for images of all shapes and sizes all over the site. Is there anyway to make the outer-div hug the image, rather than fill his parent?
我不想手动设置外部 div 的宽度，因为我将此子模板用于整个网站上各种形状和大小的图像。有没有办法让外部 div 拥抱图像，而不是填充他的父母？
You need display: inline-blockcombined with text-align: center.
你需要display: inline-block结合text-align: center.
See:http://jsfiddle.net/thirtydot/V3XyK/
见：http : //jsfiddle.net/thirtydot/V3XyK/
HTML:
HTML：
<div class="imageContainer">
<div>
<img src=".." />
<span>...caption...</span>
</div>
</div>
CSS:
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);
}
回答by Jonah Katz
Perhaps just make the the div width 1px and do overflow: visible
也许只是使 div 宽度为 1px 并做 overflow: visible
回答by comu
This is it. Unlike the answer above, it will work in IE:
就是这个。与上面的答案不同，它将在 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>
You would use it like this:
你会像这样使用它：
<div class="outerCont">
<img src="flower.jpg" /> <!--Or where ever the image is located -->
<div class="comment">
<p>Hello</p>
</div>
</div>
The only issue that comes with both the ways above (mine and the other dude's) is that you sacrifice centering the image. In order to center the image you would have to creative a JavaScript using jQuery and use the CSS property to change widths and heights according to there inner content. What you are asking is for us to 'Shrink Wrap' a div to its contents, which is only something you can do in 3 special cases. Floated objects, Inline or Inline-Block objects, and and Absolutely positioned objects. Both Floated and Absolute objects cannot be centered without the use of JavaScript, and Inline Block doesn't act correctly in IE, meaning you need to use display:inline; float:left; for it to work like inline-block. You could center the image with JavaScript, and that's it. I can provide that code, but only upon request.
上述两种方式（我的和其他人的）带来的唯一问题是你牺牲了图像的居中。为了使图像居中，您必须使用 jQuery 创建一个 JavaScript，并使用 CSS 属性根据内部内容更改宽度和高度。您要求我们将 div 的内容“收缩包装”，这只是您在 3 种特殊情况下可以执行的操作。浮动对象、内联或内联块对象以及绝对定位的对象。Floated 和 Absolute 对象都不能在不使用 JavaScript 的情况下居中，并且 Inline Block 在 IE 中无法正确运行，这意味着您需要使用 display:inline；向左飘浮; 让它像内联块一样工作。您可以使用 JavaScript 将图像居中，仅此而已。我可以提供该代码，但只能根据要求提供。
