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
-
Aktualizujete svoji .NET webovou aplikaci? Může se hodit app_offline.htm
10. července 2024 -
Proč je důležité tvořit obsah na váš web?
29. srpna 2024 -
-
Nejnovější
-
Nenechte se zaskočit TLS certifikáty na 47 dní
2. května 2025 -
Zrychlete svůj web s LiteSpeed a CZECHIA.COM
29. dubna 2025 -
-
