Bagaimanakah Saya Boleh Mengapungkan Imej ke Kanan Bawah dengan Pembalut Teks dalam CSS dan JavaScript?

Apung Imej ke Bawah Kanan dengan Balutan Teks

Imej Terapung dengan Dimensi Tetap

Apungkan imej ke bahagian bawah halaman sambil teks membungkusnya boleh dicapai dengan gabungan CSS dan HTML. Untuk memastikan penjajaran ke bahagian bawah halaman, buat elemen "spacer" dengan atribut berikut:

<div class="spacer"></div>

Dalam CSS, berikan spacer sifat berikut:

.spacer {
    float: right;
    height: calc(100% - ImageHeight); /* Adjust the height to match the content */
    width: 0px;
}

Seterusnya, gunakan sifat CSS pada imej:

<img class="bottomRight" src="..." />

.bottomRight {
    float: right;
    clear: right;
}

JavaScript untuk Kandungan Boleh Ubah Ketinggian

Untuk reka bentuk responsif di mana ketinggian kandungan berbeza-beza, JavaScript boleh digunakan untuk mengira ketinggian pengatur jarak secara dinamik:

function sizeSpacer(spacer) {
    spacer.style.height = 0;
    // Calculate spacer height based on content and image dimensions
    spacer.style.height = h + "px";
}

Panggil fungsi sizeSpacer pada acara sedia dokumen dan ubah saiz tetingkap.

Pemalam jQuery

Pemalam jQuery boleh dibuat untuk memudahkan proses, membolehkan imej terapung ke kiri atau kanan bawah, dan menentukan elemen untuk diselaraskan.

Kesimpulan

Dengan menggunakan elemen pengatur jarak, mengapungkan imej dan mengosongkan ruang kanannya, kami boleh mengapungkan dengan jayanya imej di bahagian bawah sebelah kanan sambil membungkus teks di sekelilingnya. Pendekatan ini berfungsi dengan baik untuk dimensi imej tetap dan JavaScript boleh digunakan untuk ketinggian kandungan dinamik.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengapungkan Imej ke Kanan Bawah dengan Pembalut Teks dalam CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!