Bagaimana untuk Membuat Div Pembalut Padan dengan lancar dengan Lebar Imej Kanak-kanak?

Cara Memastikan Div Pembungkus Menyesuaikan Diri dengan Lebar Imej Kanak-kanak

Masalah: Bagaimana anda mengkonfigurasi div pembalut untuk mengambil lebar maksimum imej kanak-kanak sambil memastikan lebar div kekal cecair?

Penyelesaian:

Satu pendekatan yang tidak konvensional ialah menetapkan sifat paparan div pembalut kepada "jadual" dan lebarnya kepada "1%." Dengan melakukan ini, imej melebihi kekangan lebar pembalut dan menegaskan saiznya sendiri pada pembalut.

.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>

Penyelesaian ini membolehkan div membentuk sendiri kepada lebar imej secara dinamik, walaupun div lebar tidak ditetapkan secara eksplisit.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Div Pembalut Padan dengan lancar dengan Lebar Imej Kanak-kanak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!