絶対的な位置決めを行わずにラッパーを子画像の最大幅に動的に調整するにはどうすればよいですか?

ラッパーを子画像の最大幅に準拠させる

ラッパー要素がその幅を子の最大幅に調整する必要があるシナリオ画像のように、ラッパーに固定幅を使用することは理想的な解決策ではありません。目標は、画像とテキスト コンテンツの動的な性質のため、絶対位置決めを使用せずにこれを達成することです。

解決策:

洗練された解決策ではありませんが、次のような方法があります。別の表示プロパティを使用してこれを実現する方法。ラッパーをテーブルとして表示するように設定し、CSS を使用してそれに 1% の幅を割り当てると、画像はこの幅をオーバーライドし、最大値まで拡張されます。

ラッパーの CSS コードは次のとおりです。

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

画像を含むラッパーの HTML コードとtext:

<div class="wrapper">
  <img src="your_image_url">
  <p>Your text content goes here.</p>
</div>

この手法を使用すると、テキストの長さに関係なく、ラッパーは子画像の最大幅まで拡張されます。

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