Bagaimanakah Saya Boleh Membuat Pembungkus Secara Dinamik Melaraskan kepada Lebar Maksimum Imej Anaknya Tanpa Kedudukan Mutlak?

Jadikan Pembungkus Sesuai dengan Lebar Imej Kanak-Kanak Maksimum

Dalam senario di mana elemen pembalut harus melaraskan lebarnya kepada lebar maksimum anaknya imej, menggunakan lebar tetap untuk pembalut bukanlah penyelesaian yang ideal. Matlamatnya adalah untuk mencapai ini tanpa menggunakan kedudukan mutlak kerana sifat dinamik imej dan kandungan teks.

Penyelesaian:

Walaupun bukan penyelesaian yang elegan, terdapat kaedah untuk mencapai ini menggunakan sifat paparan yang berbeza. Dengan menetapkan pembalut untuk dipaparkan sebagai jadual dan memberikannya lebar 1% menggunakan CSS, imej akan mengatasi lebar ini dan berkembang ke размер maksimumnya.

Berikut ialah kod CSS untuk pembalut:

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

Dan kod HTML untuk pembalut dengan imej dan teks:

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

Menggunakan teknik ini, pembalut akan mengembang kepada lebar maksimum imej kanak-kanak, tanpa mengira panjang teks.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Pembungkus Secara Dinamik Melaraskan kepada Lebar Maksimum Imej Anaknya Tanpa Kedudukan Mutlak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!