如何在图片周围包裹div？

Question

我试图将图像包装在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和包装器都没有边距或填充，但是包装器div比图像宽。

Answer 1

在#wrappper上使用display:inline-block

演示

Answer 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()
 });

小提琴