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

DEMO

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 e。

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

<强> Fiddle

如何在图像周围包裹div？

2 个答案: