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;
}
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;
}
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.