如何使包裝 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中文網其他相關文章！