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>
