如何将 div 包裹在图像周围？答案

【问题标题】：How to wrap div around image?如何将 div 包裹在图像周围？
【发布时间】：2014-12-03 09:13:40
【问题描述】：

我试图将图像包装在 div 中，但 div 被父 div 扩展。

<div id="parent" style="display: inline-block; position: relative; text-align:center">
    <div id="wrapper">
        <img>
    </div>
    <p>Some text that expands the wrapper div more than image width</p>
</div>

文本字段将父 div 扩展为比图像更宽，这也扩展了包装 div。如何使包装器 div 的大小与 img 完全相同？

img 和 wrapper 没有边距或填充，但是 wrapper div 比图像宽。

【问题讨论】：

你还有其他的css吗？
divs 是块元素，因此它们将占据其父元素的整个宽度。尝试将wrapper 设置为display:inline 或float:left，具体取决于您希望它的显示方式。
@Firze 将 display: inline-block 放在#wrapper 上。

标签： html css word-wrap

【解决方案1】：

在#wrappper 上使用display:inline-block

DEMO

【讨论】：

哦。我很确定我已经尝试过了，但显然我没有。谢谢。我现在感觉很笨。
@Firze 我喜欢为元素添加边框，这样我就可以准确地看到正在发生的事情。希望你试试我的方法。 :)
如果display: inline-block 不起作用，请尝试使用display: inline。

【解决方案2】：

你需要在包装元素上设置display:inline-block

 <div id="parent" style="display: inline-block; position: relative; text-align:center">
    <div id="wrapper" style="display: inline-block;">
        <img src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/source_code-128.png" />        
    </div>    
    <p>Some text that expands the wrapper div more than image width</p>
</div>

如果您想保持p 的大小与图像相同，则需要使用一些 JavaScript 或 jQuery

例如

 $('#parent').css({
     maxWidth: $('img').width()
 });

Fiddle

【讨论】：