Heim > Web-Frontend > CSS-Tutorial > Wie positioniere ich Kontrollkästchen mithilfe von CSS unten rechts in Bildern?

Wie positioniere ich Kontrollkästchen mithilfe von CSS unten rechts in Bildern?

Barbara Streisand
Freigeben: 2024-11-27 08:55:18
Original
847 Leute haben es durchsucht

How to Position Checkboxes at the Bottom Right of Images Using CSS?

So zeigen Sie Kontrollkästchen für die Bildauswahl an

Frage:

Wie kann man rechts unten ein Kontrollkästchen anzeigen? jedes Bild für Auswahl?

Antwort:

Verwendung von reinem CSS

Um dies ohne zusätzliches JavaScript zu erreichen, kann man reines CSS nutzen .

HTML Struktur:

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

CSS-Styling:

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

Dieses CSS positioniert die Kontrollkästchen absolut in der unteren rechten Ecke ihrer jeweiligen Bilder.

Klickereignisse

Zur Behandlung von Kontrollkästchen-Klickereignissen wenden Sie einfach Klickhandler an zu jedem Kontrollkästchen. Bei jedem Klickereignis wird die Auswahl des zugehörigen Bilds umgeschaltet.

Das obige ist der detaillierte Inhalt vonWie positioniere ich Kontrollkästchen mithilfe von CSS unten rechts in Bildern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage