Bagaimanakah Saya Boleh Mengapungkan Imej ke Bawah Kanan dengan Balutan Teks dalam HTML dan CSS?

Imej Terapung dengan Balutan Teks: Panduan Komprehensif

Dalam HTML dan CSS, meletakkan imej di sebelah teks boleh menjadi cabaran, terutamanya apabila anda mahu imej terapung ke bahagian bawah sebelah kanan dan teks untuk membungkusnya. Artikel ini meneroka cara untuk mencapai kesan ini menggunakan elemen spacer dan JavaScript.

Buat Elemen Spacer

Untuk menolak imej ke bahagian bawah halaman, buat elemen spacer dengan apungan: kanan dan ketinggian sama dengan perbezaan antara kandungan dan ketinggian imej:

<div class="spacer"></div>
<img class="bottomRight" src="" />

CSS Gaya

Gunakan gaya CSS berikut:

.spacer {
  float: right;
  width: 0px;
}
.bottomRight {
  float: right;
  clear: right;
}

Mengira Ketinggian Spacer

Untuk meletakkan imej dengan tepat, anda akan perlu mengira ketinggian spacer menggunakan JavaScript. Fungsi ini mengambil elemen spacer sebagai hujah:

function sizeSpacer(spacer) {
  var container = spacer.parentNode;
  var img = spacer.nextElementSibling || spacer.nextSibling;
  var lastContentNode = container.children[container.children.length - 1];
  var h = Math.max(0, container.clientHeight - img.clientHeight);
  var imgBottom = img.getBoundingClientRect().bottom;
  var lastContentBottom = lastContentNode.getBoundingClientRect().bottom;

  // Adjust spacer height to align with content bottom
  while (h > 0 && imgBottom > lastContentBottom) {
    spacer.style.height = --h + "px";
    imgBottom = img.getBoundingClientRect().bottom;
    lastContentBottom = lastContentNode.getBoundingClientRect().bottom;
  }

  if (lastContentBottom > imgBottom) {
    spacer.style.height = ++h + "px";
  }
}

Pemalam jQuery

Untuk kemudahan, anda boleh menggunakan pemalam jQuery ini yang menyokong imej terapung bawah kiri atau kanan :

$(function() {
  $(".bottomRight").bottomRight();
});

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