Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div class="galerie"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Eichhörnchen_Düsseldorf_Hofgarten_edit.jpg/320px-Eichhörnchen_Düsseldorf_Hofgarten_edit.jpg" width="320" height="217" alt="sciurus"> <p>Sciurus vulgaris</p> </div> <div class="galerie"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/GiraffaCamelopardalisTippelskirchi-Masaai-Mara.JPG/324px-GiraffaCamelopardalisTippelskirchi-Masaai-Mara.JPG" width="324" height="599" alt="giraffa"> <p>Giraffa tippelskirchi</p> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
* {box-sizing: border-box; margin: 0; padding: 0;} .galerie { background-color: palegoldenrod; width: 200px; height: 210px; display: inline-block; padding: 8px; margin: 10px; vertical-align: top; overflow: hidden; position: relative; } .galerie img { max-width: 100%; height: auto; display: block; margin: 0 auto; } .galerie p { text-align: center; padding: 8px 0 8px; position: absolute; bottom: 0; left: 0; background-color: palegoldenrod; width: 100%; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>