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
4
5
6
7
8
9
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 15 /* lo demas son leseras */ 16 font-family: arial; 17 font-size: 15px; 18 text-align: center; 19 padding: 2px; 20 margin: 10px; 21 border: 2px solid transparent; 22 } 23 24 div.imagen:hover { 25 border: 2px solid #ff0000; 26 } 27 28 </style> 29 30 <div class="galeria"> 31 <div class="imagen"> 32 <img src="imagen.gif"> 1 33 </div> 34 <div class="imagen"> 35 <img src="imagen.gif"> 2 36 </div> 37 <div class="imagen"> 38 <img src="imagen.gif"> 3 39 </div> 40 <div class="imagen"> 41 <img src="imagen.gif"> 4 42 </div> 43 <div class="imagen"> 44 <img src="imagen.gif"> 5 45 </div> 46 <div class="imagen"> 47 <img src="imagen.gif"> 6 48 </div> 49 <div class="imagen"> 50 <img src="imagen.gif"> 7 51 </div> 52 <div class="imagen"> 53 <img src="imagen.gif"> 8 54 </div> 55 <div class="imagen"> 56 <img src="imagen.gif"> 9 57 </div> 58 </div> 59 60 </body></html>