Galerie pomocí vlastnosti float

1. října 2005

•

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>