如何使包装 Div 流畅地匹配子图像的宽度？

如何确保 Wrapper Div 适应子图像的宽度

问题：如何配置一个包装 div，采用子图像的最大宽度，同时确保 div 的宽度保持不变流体？

解决方案：

一种非常规的方法是将包装器 div 的显示属性设置为“table”，并将其宽度设置为“1%”。通过这样做，图像超出了包装器的宽度限制，并在包装​​器上断言其自己的大小。

.wrapper {
  border: 1px solid red;
  display: table;
  width: 1%;
}

<div class="wrapper">
  <img  src="/static/imghwm/default1.png" data-src="http://www.fillmurray.com/284/196" class="lazy" alt="如何使包装 Div 流畅地匹配子图像的宽度？" >
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie.
    Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

此解决方法允许 div 动态地将自身塑造为图像的宽度，即使 div 的宽度未明确设置。

以上是如何使包装 Div 流畅地匹配子图像的宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！