Galerie pomocí vlastnosti float
Zarovnání obrázků v galerii pomocí vlastnosti float.
Pro správnou funkci si vytvořte obrázky podobné tomuto. Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Russ Weakley. Bližší popis najdete v článku Tutorial 4 – Floating an image thumbnail gallery.
CSS
.nahled
{
float: left;
width: 100px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
}
.clearboth
{
clear: both;
}
XHTML
<html>
<body>
<div class=“nahled“>
<img src=“fotkanahled1.jpg“ alt=““ width=“100″ height=“100″/><br/>
Popis 1
</div>
<div class=“nahled“>
<img src=“fotkanahled2.jpg“ alt=““ width=“100″ height=“100″/><br/>
Popis 2
</div>
<div class=“nahled“>
<img src=“fotkanahled3.jpg“ alt=““ width=“100″ height=“100″/><br/>
Popis 3
</div>
<p><br class=“clearboth“/></p>
<div class=“nahled“>
<img src=“fotkanahled3.jpg“ alt=““ width=“100″ height=“100″/><br/>
Popis 4
</div>
<div class=“nahled“>
<img src=“fotkanahled2.jpg“ alt=““ width=“100″ height=“100″/><br/>
Popis 5
</div>
<div class=“nahled“>
<img src=“fotkanahled1.jpg“ alt=““ width=“100″ height=“100″/><br/>
Popis 6
</div>
</body>
</html>
Mohlo by vás také zajímat
-
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024 -
AI v programování: Jak používat GitHub Copilot (část 2)
19. února 2024 -
-
Nejnovější
-
-
-
LAMP VPS: Rychlé a efektivní nasazení webových aplikací
6. února 2025 -
OpenAI zpřístupnilo ChatGPT Search všem uživatelům
6. února 2025