如何使包裝 Div 動態調整其寬度以匹配其子圖像的寬度？

使包裝器適應子影像寬度

問題：

目標是設計根據其目標子影像的寬度動態調整其寬度的包裝器。換句話說，包裝器不應具有固定寬度，而應簡單地容納所包含圖像的寬度。

範例：

提供的程式碼展示了包裝的圖像在紅邊包裝 div 中。然而，包裝器 div目前呈現固定寬度，導致出現不良外觀：

<div>

目標：

期望的結果是動態匹配的包裝器子圖像的寬度，允許視覺上吸引人的版面而不重疊文字：

<div>

解決方案：

實現此目的的一種非常規方法涉及利用包裝器的display: table 屬性。透過將wrapper的寬度設定為1%，子影像將覆蓋該寬度並採用其實際大小，從而有效地確定wrapper的寬度。

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

該解決方案提供了一種簡單有效的方法來創建一個適應子圖像寬度的包裝器，確保佈局具有視覺吸引力。

以上是如何使包裝 Div 動態調整其寬度以匹配其子圖像的寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！