Float: down es posible pese a que no existe 26.1.13
El "Float: down" en Css es posible pese a que no exista. ¿Intrigado? Pues pasa por el artículo.
Float: down es posible pese a que no existe
Sí. Has leído bien el título. Dije float: down.Pero tranquilo, antes de que me quemes ya te adelanto que es una licencia. De lo que va el artículo es de cómo emularlo. O expuesto de otra forma: dada una relación de elementos hacer que los pares se coloquen en una línea y los impares en otra.
"Float: down" por Wolfcry911
Esta realización es obra del usuario de codepen.io wolfcry911. Antes de ver el sencillo código que lo hace posible, mira el html del ejemplo. Una simple lista. Cada item se ha numerado correlativamente. Y el resultado: los items pares se colocan en la línea inferior:
Una pequeña explicación
El cómo se logra es muy sencillo. Se define unos tamaños para los li´s flotados y un pequeño margen de separación entre ellos. Con esto tendríamos una bonita fila ordenada por el orden de aparición en el html. El siguiente paso es desplazar a la línea de abajo los items pares y que su hueco en la fila lo ocupe el siguiente.
Para apuntar a estos (los pares) está la pseudoclase :nth-child(even). Y a continuación fíjate que "casualmente" los márgenes superior e izquierdo coinciden ¡qué casualidad! con el tamaño más el margen declarado en los li´s.
"float:down" con más de dos filas
Si juegas con el ejemplo anterior y añades items para formar más de dos filas o cambias el selector a los impares :nth-child(odd) verás que el resultado no es el esperado.
Así que hay que ir por otro camino y afectar a más elementos: li:nth-child(Xn+y)
Este es un fork de la realización de Hugo Giraudel en codepen Float: down with Sass
En el pen original el autor se sirve de un preprocesador Css (Sass) para ahorrarse cálculos y tipear código css. Pero al final, volvemos a tener una serie de items desplazados (tantos como filas extras queramos crear):
li {
float: left;
height: 4em;
width: 4em;
margin: 0.4em 0.4em 0.4em 0;
}
li:nth-child(4n+4) {
margin-left: -4.4em;
margin-top: 13.6em;
}
li:nth-child(4n+3) {
margin-left: -4.4em;
margin-top: 9.2em;
}
li:nth-child(4n+2) {
margin-left: -4.4em;
margin-top: 4.8em;
}
De nuevo, fíjate en la relación entre los márgenes izquierdo y superior de cada :nth-child(Xn+y) con el tamaño + margen de li. Esto es, para el desplazamiento en la vertical =4.4em*y que hace cada li en el selector de número de hijo.
TIP para codepen: Cuando te encuentres con un pen que usa cualquier preprocesador en el código Css, pica en el texto que encabeza el código CSS (SCSS) para ver las reglas procesadas (puro Css)
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso