Maquetar una galería de fotos con CSS

HTML
<div id="principal">
	<h3>GALER&Iacute;A CSS</h3>
	<div class="contenedorfoto"><a href="#"><img src="1.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></div>
	<div class="contenedorfoto"><a href="#"><img src="2.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></div>
	<div class="contenedorfoto"><a href="#"><img src="3.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></div>
	<div class="contenedorfoto"><a href="#"><img src="4.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></div>
	<div class="contenedorfoto"><a href="#"><img src="5.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen bastante m&aacute;s extensa</span></a></div>
	<div class="contenedorfoto"><a href="#"><img src="6.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></div>
	<div class="contenedorfoto"><a href="#"><img src="7.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></div>
	<div class="contenedorfoto"><a href="#"><img src="8.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></div>
	<div class="contenedorfoto"><a href="#"><img src="9.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></div>
	<div class="contenedorfoto"><a href="#"><img src="10.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></div>
	<div class="contenedorfoto"><a href="#"><img src="11.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></div>
</div>
CSS
body {
	background-color: #ebeef2;
	margin:20px;
}

h3 {
	color:#838c98;
}

img {
	border:1px solid #EEE;
}

#principal {
	margin:0 auto;
	position: relative;
}

.contenedorfoto {
	float:left;
	width:210px;
	height:180px;
	margin:10px;
	padding:5px;
	background-color:#f5f7f9;
	border-right: #a5a7aa solid 1px;
	border-bottom: #a5a7aa solid 1px;
	text-align:center;
}

.contenedorfoto a {
	text-decoration: none;
}

.contenedorfoto span {
	color:#515151;
	font-family: Trebuchet MS;
	font-size: 9pt;
}

Autor: denz

Publicado: 28/07/2018

Compartir Elemento Web

Donar a Compositu
Otras formas de ayudar
  • Compártelo en tus redes sociales.
  • Recomienda los elementos.
  • Regístrate Aquí
  • Deja tu comentario agradeciendo el aporte.

Descarga el código completo del Elemento Web y archivos necesarios (imágenes, librerias, plugins, frameword, etc)

Deja tu comentario