Een thumbnail image galerij waarbij de afbeelding een variabele hoogte kunnen hebben.

HTML

<div class="thumbwrap">
 <a href="image.jpg">
 <span>
 <img alt="photo 01" src="image.jpg" width="160" height="162" />
 <span>sul monitor 1</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 02" src="image.jpg" width="160" height="145" />
 <span>sul monitor 2</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 03" src="image.jpg" width="160" height="200" />
 <span>sul monitor, seduto</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 04" src="image.jpgg" width="160" height="118" />
 <span>sul monitor, con il koala</span>
 </span>
 </a>
 <a href="image.jpgg">
 <span>
 <img alt="photo 05" src="image.jpg" width="160" height="134" />
 <span>sul monitor, guarda fuori</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 06" src="image.jpg" width="160" height="188" />
 <span>sul monitor, si lecca una zampa</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 07" src="image.jpg" width="160" height="100" />
 <span>sul terrazzo, sdraiato al sole 1</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 08" src="image.jpg" width="160" height="103" />
 <span>sul terrazzo, sdraiato al sole 2</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 09" src="image.jpg" width="160" height="200" />
 <span>sul terrazzo, al sole seduto</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 10" src="image.jpgg" width="160" height="128" />
 <span>sul terrazzo, si lava</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 11" src="image.jpg" width="160" height="201" />
 <span>sul balcone, seduto</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 12" src="image.jpg" width="160" height="109" />
 <span>sulla ringhiera del balcone, in piedi</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 13" src="image.jpg" width="160" height="145" />
 <span>sulla ringhiera del balcone, contro il cielo blu 1</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 14" src="image.jpg" width="160" height="135" />
 <span>sulla ringhiera del balcone, contro il cielo blu 2</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 15" src="image.jpg" width="160" height="128" />
 <span>sulla ringhiera del balcone, con l'ombra sul muro</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 16" src="image.jpg" width="160" height="113" />
 <span>una zampa</span>
 </span>
 </a>
</div>

CSS

body {
	background-color: #fff;
	color: #000;
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	line-height: 1.1;
	text-align: center;
}
.thumbwrap {
	display: block;
	border: 1px solid #999;
	padding: 15px 8px 0 8px;
	background-color: #f8f8f8;
}
.thumbwrap a {
	display: -moz-inline-box;  /* Moz */
	display: inline-table;  /* Op6+, Saf */
	display: inline-block;  /* IE */
	margin: 0 6px 15px 6px;
	border: 4px solid #999;
	text-decoration: none;
	color: #000;
	background-color: #eee;
	border-spacing: 0;  /* Op6 */
	width: 168px;
}
.thumbwrap a:hover {
	border-color: #6f6;
	background-color: #dfd;
}
.thumbwrap a img {
	border-width: 0;
	vertical-align: bottom;
}
.thumbwrap a span {
	display: block;
}
.thumbwrap a span span {
	padding: 4px;
}
.thumbwrap a>span {
	width: 160px;
}