verticalmente saber piscinas pedaleando ondas nadar miedo hondo fuera flotar espalda cómo con como cabeza aprender agua javascript jquery css css3 css-float

javascript - saber - como flotar pedaleando



¿Cómo flotar elementos con diferentes alturas? (7)

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?


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/


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


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.


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.


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


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


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.