"Mejor" flotando en CSS

Question

Estoy experimentando con CSS y la propiedad float. Tengo este "sitio web", con una gran cantidad de divs alineado a 80px rejilla y float: left:

¿Hay una manera de CSS para hacer que el aspecto de esto - por lo que los elementos se puede utilizar el espacio vacío por encima de ellos ?

Sin JavaScript, si es posible.

Gracias, Martin.

Answer 1

para el alicatado contenido dinámico tanto horizontal como verticalmente, las opciones de estilo CSS son:

• float:left, como ya se ha visto, sólo ofrece mosaico horizontal limitada.
• display:inline-block da un resultado diferente que float:left, pero sin mosaico.
• CSS multi-column layout aún no está completamente definido. Admite flujo vertical en columnas implícitas, pero probablemente no de una manera que califique como mosaico.
• flexible box layout aún no es compatible. Es compatible con un tipo de flujo horizontal o vertical que podría no calificar como mosaico, aunque se siente como un paso en la dirección correcta.

En resumen, incluso los estándares de CSS que no están completamente definidos todavía no parecen ser compatibles; por lo que puede estar muy lejos. La opción de reserva más simple es usar un complemento jQuery.

Además de Masonry (como se sugiere @Billy Moat), otros dos plugins jQuery son Isotope y Tiles Gallery. La masonería parece ser mencionada con más frecuencia.

Answer 2

No, esto no se puede hacer en CSS. La mejor manera es utilizar un elemento de Javascript llamado mampostería, me temo.

http://masonry.desandro.com/

Answer 3

digamos que el número de px para ir hasta llenar el espacio de 1 bloque es 50px. margin-top: -50px;

No es mágico, es solo un poco manual hacer eso para cada uno. Si su contenido es dinámico, esto no podría funcionar, o necesita js para calcular si tenemos que subir o no, en múltiples filas y todo.

Answer 4

esto se puede hacer, pero como dice CHE, si su contenido es dinámico, esto irá mal de la peor manera posible.

Pero si es un sitio estático, esto se puede hacer, seguro.

Para resolver esto, piense en los bloques & agrupe y alinéelos, dentro de cada bloque vuelva a alinear todos los bloques.