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=obal> <img src="i/200"> <img src="i/200"> <img src="i/200"> <img src="i/200"> <img src="i/200"> <img src="i/200"> <img src="i/200"> <img src="i/200"> <img src="i/200"> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.obal { width: 50%; margin: auto; } .obal img { float: left; width: 30%; /* tri stĺpce; 10% na dve 5% medzery */ max-width: 100%; margin-bottom: 5%; margin-left: 5%; } .obal img:nth-child(3n - 2) { margin-left: 0; } @media (max-width: 650px) { .obal { width: 90%; } } @media (max-width: 400px) { .obal { width: auto; } .obal img { width: 47.5%; /* dva stlpce; 5% na medzeru v strede */ } .obal img:nth-child(1n) { margin-left: 5%; } .obal img:nth-child(2n - 1) { margin-left: 0; } } @media (max-width: 200px) { .obal img { float: none; width: auto; margin-left: 0; } }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>