I CSS hanno una caratteristica interessante della proprietà float. Un float quando non trova più spazio su una stessa riga viene spinto sulla riga successiva. Quindi se definiamo la somma della larghezza di un certo numero di float come uguale alla larghezza del loro contenitore, avremo sempre lo stesso numero di float su una riga. Vediamo come sfruttare questa caratteristica per creare una galleria di immagini di Flickr.
Abbiamo questa struttura HTML:
<div id="gallery">
<ul>
<li><a href="#"><img src="1.jpg" alt="" /></a></li>
<li><a href="#"><img src="2.jpg" alt="" /></a></li>
<li><a href="#"><img src="3.jpg" alt="" /></a></li>
<li><a href="#"><img src="4.jpg" alt="" /></a></li>
<li><a href="#"><img src="5.jpg" alt="" /></a></li>
<li><a href="#"><img src="6.jpg" alt="" /></a></li>
<li><a href="#"><img src="7.jpg" alt="" /></a></li>
<li><a href="#"><img src="8.jpg" alt="" /></a></li>
</ul>
</div>
Per prima cosa assegniamo gli stili ai due contenitori principali, usando l'overflow per contenere i float:
#gallery {
margin: 0 auto;
width: 500px;
padding: 55px 0 0 0;
background: url(flickr.png) no-repeat 50% 0;
}
#gallery ul {
width: 500px;
margin: 0;
height: 100%;
overflow: hidden;
padding: 0 0 1.5em 0;
background: url(bottom.png) no-repeat 50% 100%;
list-style: none;
}
Quindi usiamo il floating sulle voci della lista facendo in modo che la somma delle loro larghezze non permetta di avere più di quattro float per riga:
#gallery ul li {
width: 120px;
height: 100px;
float: left;
margin: 0 5px 5px 0;
}
Concludiamo i nostri stili assegnando delle dichiarazioni ai link e alle immagini:
#gallery ul li a {
display: block;
width: 100%;
height: 100%;
}
#gallery ul li a img {
border: none;
width: 100%;
height: 100%;
display: block;
}
Potete visionare l'esempio finale in questa pagina.