ラッパー Div の幅を子画像の幅に合わせて動的に調整するにはどうすればよいですか?

ラッパーを子画像の幅に適応させる

問題:

目標はデザインすることです子画像の幅に基づいて幅を動的に調整するラッパー。つまり、ラッパーは固定幅を持つ必要はなく、含まれる画像の幅に単純に対応する必要があります。

例:

提供されたコードはラップされた画像を示しています。赤枠のラッパー div 内。ただし、ラッパー div は現在固定幅を示しており、望ましくない外観になっています:

<div>

目的:

望ましい結果は、動的に一致するラッパーです。子画像の幅を調整し、重なり合うことなく視覚的に魅力的なレイアウトを可能にします。 text:

<div>

解決策:

これを達成するための型破りなアプローチの 1 つは、ラッパーの display: table プロパティを利用することです。ラッパーの幅を 1% に設定すると、子画像はこの幅をオーバーライドして実際のサイズを想定し、ラッパーの幅を効果的に決定します。

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

このソリューションは、次のようなシンプルで効果的な方法を提供します。子画像の幅に適応するラッパーを作成し、視覚的に魅力的なレイアウトを確保します。

以上がラッパー Div の幅を子画像の幅に合わせて動的に調整するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。