CSS: Galería Fluida
Ejemplo de una galeria de imagenes fluida. NO HAY TABLAS!
Cambia el ancho de la página y la galería se ajustará solita ![]()
1
2
3
imagen.html 1 <html><body> 2 3 <style> 4 5 div.galeria { 6 width: 100%; 7 overflow: auto; // firefox fix 8 } 9 10 div.imagen { 11 float: left; 12 display: block; 13 width: 114px; /* ancho de la imagen + padding*2 */ 14 height: 114px; 15 16 font-family: arial; 17 font-size: 15px; 18 text-align: center; 19 padding: 2px; 20 margin: 10px; 21 border: 2px solid green; 22 } 23 24 div.imagen span { 25 display:table-cell; 26 vertical-align:middle; 27 position:static; 28 } 29 30 div.imagen:hover { 31 border: 2px solid #ff0000; 32 } 33 34 div.imagen img { 35 max-width: 90px; 36 max-height: 90px; 37 display: block; 38 margin: 0px auto; 39 } 40 41 </style> 42 43 <div class="galeria"> 44 <div class="imagen"><span> 45 <img src="imagen.gif"> 1 46 </span> 47 </div> 48 <div class="imagen"> 49 <img src="IMG_0848.jpg"> 2 50 </div> 51 <div class="imagen"> 52 <img src="IMG_0849.jpg"> 3 53 </div> 54 </div> 55 56 </body></html>