Ir al contenido

Este post hace más de dos años que no se ha revisado, es posible que la información publicada sea obsoleta o las referéncias no existan.

Evitar el colapso de columnas mediante :nth-child

Ejemplo de columnas colapsadas

Una manera de mantener columnas de diferentes alturas alineadas y evitar que se colapsen, es mediante el pseudoelemento :nth-cild, simplemente se trata de añadir clear:left; a la primera columna de cada fila.

En este caso, 3 columas, sería:

li:nth-child(3n+4){
    clear:left;
}

De esta manera, además de igualar las columnas, también forzamos el numero de columnas (3) aunque el ancho del contenedor sea más grande que la suma de las columnas.

Como el cálculo de :nth-child puede resultar algo lioso os dejo el enlace a la herramienta que css-tricks tiene en su página. :nth Tester.

En Explorer … la versión 8 y anteriores no lo soporta. La única solución que se me ocurre es dar una altura minima a cada columna min-height:200px; que contemple la altura de la columna más alta.

Código y ejemplo