ラッパー Div を子画像の幅に流動的に一致させるにはどうすればよいですか?-CSSチュートリアル-php.cn

ラッパー Div を子画像の幅に流動的に一致させるにはどうすればよいですか?

Linda Hamilton

リリース： 2024-11-24 19:59:53

オリジナル

322 人が閲覧しました

How to Make a Wrapper Div Fluidly Match the Width of a Child Image?

ラッパー Div を子画像の幅に確実に適応させる方法

問題: どのように設定しますかdiv の幅を維持しながら、子画像の最大幅を引き受けるラッパー div流体?

解決策:

型破りなアプローチの 1 つは、ラッパー div の表示プロパティを「table」に設定し、その幅を「1%」に設定することです。これを行うと、画像はラッパーの幅制約を超え、ラッパー上で独自のサイズを主張します。

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

ログイン後にコピー

<div class="wrapper">
  <img src="http://www.fillmurray.com/284/196">
  <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 を子画像の幅に流動的に一致させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。