elementos de flotación css con alturas desiguales izquierda y hacia arriba en la rejilla

Me pregunto cómo puedo lograr el efecto en la figura 1.elementos de flotación css con alturas desiguales izquierda y hacia arriba en la rejilla

Float left up

Lo que he conseguido hasta ahora es

.box { display: inline-block; vertical-align: top; width: 100px;}

Esto me da el resultado se ilustra en la figura 2. (Aviso: soy consciente de que puedo lograr lo mismo con float: left)

Mi código HTML es como la siguiente:

<span class="box">A<br><br><br><br></span> 
<span class="box">B<br></span> 
<span class="box">C<br><br><br></span> 
<span class="box">D<br><br><br></span> 
<span class="box">E<br><br><br><br><br><br></span> 
<span class="box">F</span> 
<span class="box">G<br><br><br><br></span> 
<span class="box">H<br></span> 
<span class="box">I<br><br></span>

Quiero que cada elemento que hay que flotaba a la izquierda en la medida de lo posible, pero mientras tanto flotando hacia arriba.

¿Es posible hacer esto con CSS puro, o necesitaré algún javascript?

EDIT:

Es importante para mí que toda la red se coloca al centro de la página. Es por eso que uso display: inline-block. La cuadrícula tampoco debe fijarse a la página porque quiero que vuelva a fluir cuando cambie el tamaño de mi ventana.

Fuente

2012-07-11 Jules Colle

Dado que ya está utilizando jQuery jQuery mampostería podrían interesarle: http://masonry.desandro.com/ – Chandu

@Chandu: impresionante. Lo estoy probando ahora.¿Podría publicar esto como una respuesta, por lo que puedo aceptarlo si funciona;) –

Hm, estoy bastante seguro de que esto se puede lograr con CSS solo. – Christoph

Puede utilizar la popular biblioteca Masonry.

Un plugin para jQuery diseño dinámico La otra cara de CSS flota

Aquí es un código example ...

$('#container').masonry({ 
    itemSelector: '.box' 
});

Aquí es la fuente de Github y una entrevista con David Desandro en el podcast de Shoptalk.

Para las personas que no usan jQuery, tenga en cuenta que también existe Vanilla Masonry que es la versión sin marco.

Consejo: Asegúrate de que el contenedor principal tenga una posición: relativa para que todo el contenido esté vinculado a tu contenedor.

Fuente

2012-07-11 14:27:49

@Jules: agregué un consejo sobre cómo asegurarse de que los elementos flotantes permanezcan en su contenedor. –

gracias. Acepté la respuesta de Chandu porque era el primero. Sin embargo, la suya es igual de buena para mí. Lástima que no puedo aceptar más de una respuesta. –

Bueno, mientras Chandu escribió un comentario de una línea, elaboré esta respuesta con mucha más información. Mi mal ;-) –

Puesto que ya está usando jQuery, jQuery mampostería podría interesarle: http://masonry.desandro.com

Fuente

2012-07-11 14:29:26 Chandu

Funciona, pero no completamente lo que quería. Debería haber mencionado que uso display: inline-block porque quiero centrar mi grilla en la página. La albañilería flota todo a la izquierda de mi página, y luego cambia la posición de mis cuadros a absoluta. Entonces los cuadros no están alineados con el centro. –

Oh, lo descubrí. Puedo centrar el contenedor de mis cajas con isFitWidth: true y envolver mis cajas en un contenedor centrado. Se explica aquí http://masonry.desandro.com/demos/centered.html –

Bueno, si sólo tienen como objetivo apoyar el navegador más moderno, el CSS3 multi-column layout podría ayudar. Un problema con este enfoque es que no mantendrá el mismo orden, pero puede jugar con el orden en el HTML (o Javascript).

He añadido un contenedor alrededor de sus tramos llamado #container.

#container { 
    -webkit-column-width: 100px; 
    -moz-column-width: 100px; 
    column-width: 100px; 
}

jsFiddle Demo

Fuente

2012-07-11 14:37:08 kapa

genial, esto será muy útil en el futuro. Pero por ahora me quedaré con la solución jquery. –

artículos estarán fuera de servicio con un diseño de columna – neaumusic

elementos de flotación css con alturas desiguales izquierda y hacia arriba en la rejilla

Respuesta

Cuestiones relacionadas