Embalaje de caja con CSS

Question

Estoy tratando de resolver el problema clásico de embalaje/mochila de caja con un diseño de CSS.

Me gustaría organizar muchas cajas de forma que se minimice el espacio en blanco entre los elementos, como este;

Image describing what I am trying to acheive http://tydus.net/img/xaZll.png

CSS3 columnas funcionan muy bien aquí - cajas están dispuestas de forma secuencial, pero todos los espacios en blanco se consume de manera eficiente. Hay un pequeño problema: las cajas se "cortan" o abarcan varias columnas. No puedo hacer eso.

Utilicé el div.clearer clásico después de algunas cajas, pero eso no tuvo ningún efecto, los cuadros aún se extendían sobre esas columnas CSS3. Hay una propiedad CSS columna de envergadura, pero no es compatible con cualquier navegador todavía; (

Opcionalmente, podría definir las columnas mí mismo y disponer las cajas a mano, pero en realidad las cajas de cambiar la altura con mucha frecuencia

.

Última pregunta: ¿hay una manera de organizar las cajas de una manera que minimiza el espacio en blanco entre las cajas usando CSS puro

Gracias

Answer 1

Aunque no he probado a mí mismo, sin embargo, una respuesta posible puede ser el uso de?! el jQuery Masonry plugin. Esto parece ajustarse a los requisitos que usted indica.

Hacer esto en CSS puro y HTML será muy difícil, probablemente deba dejar ir algunos deseos/requisitos ...