javascript - saber - como flotar pedaleando

¿Cómo flotar elementos con diferentes alturas?

Question

Estoy trabajando en un diseño web responsivo que hace flotar varios elementos en 4 columnas lado a lado. Esos artículos tienen diferentes alturas y, por lo tanto, flotar no funciona correctamente

Esto es lo que pasa en este momento:

flotando mal http://f.cl.ly/items/05233z0M0H0x1t1K331B/floating-wrong.png

Cualquier idea sobre cómo hacer que los elementos floten así:

derecho flotante http://f.cl.ly/items/300e1s0o0p1r1P3k2U3z/floating-right.png

Supongo que esto debería funcionar con jQuery "mampostería", ¿verdad? Sin embargo, estoy trabajando con Zepto.js y creo que un complemento jQuery no funcionaría.

¿Hay alguna forma pura de CSS (CSS3) para eso? ¿Algún truco o algo así?

Si esto no funcionara con CSS puro o con JS es posible hacer esto:

flotante diferente http://f.cl.ly/items/0p3O1k0d332c242c0G0F/floating-different.png

Ahora, la segunda fila con los elementos 5, 6 y 7 no está "realmente" flotando de la forma que se esperaría, pero hay un salto de línea oculto (clearfix) dentro.

¿Hay alguna manera de hacerlo con CSS puro? Por ejemplo, use nth-child(4n+4) y un pseudo-selector como :after de aplicar un salto de línea con content ?

¿Alguna idea sobre eso? ¿Algún truco inteligente para hacer que funcione?

Answer 1

Como lo menciona @Arieljuod, puede usar display: inline-block lugar de float . La belleza de esto es que funcionará en todos los navegadores (incluido IE7 + con el hack a continuación) y es completamente fluido:

div {
...
display: inline-block;
vertical-align: top;
margin-bottom: 0.3em;
*display: inline;
*margin-right: 0.3em;
*zoom: 1;
...
}

Ejemplo de trabajo: http://jsfiddle.net/cRKpD/1/

Answer 2

Sé que llego tarde a la fiesta, pero alguien acaba de vincular esta pregunta con otra similar y me di cuenta de que esta pierde la solución de flexbox ...
(que no existía cuando se hizo la pregunta).

Agregue los prefijos de proveedores deseados y elimínelos innecesariamente en su CSS

.parent {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: -moz-box;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}

example

Answer 3

Un poco tarde pero pon 1 en un divisor adicional. Luego ponga 7 en ese divisor (tendrá que ajustar el divisor para que 7 aparezca debajo de 1). Podría ser útil usar desbordamiento: visible en este divisor.

Answer 4

para el último, podría rodear cada grupo de cuatro con un contenedor. Luego, haga flotar los divs dentro de los contenedores, si no quiere o no puede hacerlo manualmente, probablemente podría hacerlo fácilmente con JavaScript.

Answer 5

para la segunda opción, en lugar de "float: left" use "display: inline-block", incluso puede combinar eso con un text-align: center para completar siempre el 100% excepto la última línea

para la primera opción, podría poner 1 y 5 en el contenedor de onw, 2 y 6 en otro, y así uno, luego flotar esos contenedores

Answer 6

simplemente puede aplicar un claro a cada quinto elemento para forzarlo a comenzar todo el camino a la izquierda. Creo que se vería algo así en css3:

div#wrapper > *:nth-child(4n+1) {
clear: both;
}

demo jsFiddle

Answer 7

Primera opción

El diseño de varias columnas de CSS , una vez que esté adecuadamente estandarizado y sea compatible, puede ofrecer una forma flexible de hacerlo.

La única otra solución CSS que viene a la mente, aunque puede no responder adecuadamente, es agrupar los elementos en contenedores de columnas (1 y 5, luego 2 y 6, luego 3 y 7, luego 4).

Aparte de esas dos opciones, creo que se requiere JS.