CSS: galleria d'immagini con i valori delle tabelle

I float non sono l'unico modo per allineare gli elementi su più righe e per creare gallerie di immagini. Esistono anche i valori delle tabelle CSS per la proprietà display. In questo articolo ne vedremo un esempio pratico, ricordando tuttavia che in Internet Explorer questi valori sono supportati solo dalla versione 8 in poi.

Partiamo da questa struttura HTML:


<ul id="gallery">

<li>

	<div class="box-img">
	
	    <img src="img/1.jpg" alt="Immagine" />
	    <p>Didascalia</p>
	
	</div>
</li>

<!-- si ripete -->
</ul>

La lista può essere considerata come table, le voci di lista come table-row e gli elementi box-img come table-cell, ossia rispettivamente come tabella, righe di tabella e celle di tabella:


#gallery {
    width: 490px;
    margin: 0 auto;
    padding: 0;
    display: table;
}

#gallery .box-img {
    width: 152px;
    padding: 5px;
    border: 1px solid #cbcbcb;
    font-size: 1.2em;
    display: table-cell;
}

#gallery .box-img img {
    display: block;
    width: 100%;
}

#gallery .box-img p {
     text-align: center;
     margin: 0;
     padding: 4px 0;
     color: #666;
     font-variant: small-caps;
}

#gallery li {
    list-style: none;
    display: table-row;
}

Per impostazione predefinita, il layout di una tabella è impostato in modalità automatica, ossia non pone limiti alle dimensioni degli elementi al suo interno e adatta le proprie dimensioni globali ai suoi contenuti.

Potete visualizzare l'esempio finale in questa pagina.

Torna su