Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/09/2013, 13:21
Avatar de djsos
djsos
 
Fecha de Ingreso: septiembre-2007
Ubicación: Madrid-España
Mensajes: 374
Antigüedad: 16 años, 8 meses
Puntos: 14
libreria para elementos flotantes

Buenas tardes a todos.

Mi problema(uno de ellos) es que tengo una web donde hay muchos divs que siempre tienen el mismo ancho pero que la altura varía. Necesito que vayan rellenando de arriba hacia abajo así que les he puesto la propiedad float:left.

Bueno parece que la cosa va bien hasta que empiezo a observar que en algunas ocasiones dejan unos huecos entre ellos enormes sin rellenar. es decir en vez de auajustarse pues se saltan una "linea" porque el ultimo de los elementos es muy pequeño y puede meter dos etc..

Probadlo vosotros mismos
Código HTML:
Ver original
  1. <div id="padre">
  2. <div style="float:left; width:100px;">TEXTO TEXTO TEXTO TTEXTO EXTO TEXTO</div>
  3. <div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO</div>
  4. <div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO</div>
  5. <div style="float:left; width:100px;">TEXTOTEXTO  TEXTO TEXTTEXTO O TEXTO</div>
  6. <div style="float:left; width:100px;">TEXTEXTO TO TEXTO TEXTO TEXTO TEXTO</div>
  7. <div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
  8. <div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO</div>
  9. <div style="float:left; width:100px;">TEXTO TEXTO TEXTEXTO TO TEXTO TEXTO</div>
  10. <div style="float:left; width:100px;">TEXTO TEXTO TEXTO  TEXTO</div>
  11. <div style="float:left; width:100px;">TEXTO TEXTO TEXTO</div>
  12. <div style="float:left; width:100px;">TETO TEXTO TEXTO TEXTO TEXTO</div>
  13. <div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO</div>
  14. <div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
  15. <div style="float:left; width:100px;">TEXTO TEXTOTEXTO TEXTO</div>
  16. <div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO</div>
  17. <div style="float:left; width:100px;">TEXTO TETEXTO XTTEXTO O TEXTO TEXTO TEXTO</div>
  18. <div style="float:left; width:100px;">TEXTO TEXTO</div>
  19. <div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
  20. <div style="float:left; width:100px;">TEXTO TEXTO TEXO TEXTTEXTO O TEXTO</div>
  21. <div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO</div>
  22. <div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
  23. <div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO</div>
  24. <div style="float:left; width:100px;">TEXTO  TEXTO</div>
  25. <div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
  26. <div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
  27. <div style="float:left; width:100px;">TEXTO TEXTO </div>
  28. <div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO</div>
  29. <div style="float:left; width:100px;"> TEXTO TEXTO TEXTO</div>
  30. <div style="float:left; width:100px;">TEXTO TEXTO TETEXTO TEXTO XTO TEXTO TEXTO</div>
  31. <div style="float:left; width:100px;">TEXTO TEXTO TEXTOTEXTO</div>
  32. <div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
  33. <div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO</div>
  34. <div style="float:left; width:100px;">TEXTO TEXTO TEXTO TEXTO TEXTO</div>
  35. </div>

Acabo de montar el codigo "online" así que no se si funcionará pero es la idea lo que cuenta.

Lei hace ya mucho tiempo sobre una libreria que hacia que todos quedaran perfectamente cuadrados, alguien sabe cual es o si conoce alguna forma de solventarlo para que todo quede bonito bonito.

Gracias y buenas noches!!!!!
__________________
Es de bien nacidos ser agradecidos.
Desarrollo de software a medida | TPV Comercios