Bagaimana untuk Meletakkan Kotak Semak di Bahagian Kanan Bawah Imej Menggunakan CSS?

Cara Memaparkan Kotak Semak untuk Pemilihan Imej

Soalan:

Bagaimana seseorang boleh memaparkan kotak pilihan di bahagian bawah sebelah kanan setiap imej untuk pilihan?

Jawapan:

Menggunakan CSS Tulen

Untuk mencapai ini tanpa sebarang JavaScript tambahan, seseorang boleh memanfaatkan CSS tulen .

HTML Struktur:

<div class="container">
    <img src="image1.jpg" />
    <input type="checkbox" class="checkbox">

Penggayaan CSS:

.container { position: relative; width: 100px; height: 100px; float: left; margin-left: 10px; }
.checkbox { position: absolute; bottom: 0px; right: 0px; }

CSS ini meletakkan kotak pilihan sepenuhnya di sudut kanan bawah imej masing-masing.

Klik Acara

Untuk pengendalian acara klik kotak semak, hanya gunakan pengendali klik pada setiap kotak pilihan. Setiap acara klik akan menogol pemilihan imej yang berkaitan.

Atas ialah kandungan terperinci Bagaimana untuk Meletakkan Kotak Semak di Bahagian Kanan Bawah Imej Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!