Estoy desarrollando una plantilla en la que en uno de los apartados voy a utilizar el modo multicolumnas de CSS3.
Contenedor:
Código:
#ultimas {
margin-top: 15px;
-webkit-column-count: 2;
-webkit-column-gap: 15px;
-webkit-column-fill: auto;
-moz-column-count: 2;
-moz-column-gap: 15px;
-moz-column-fill: balance;
column-count: 2;
column-gap: 15px;
column-fill: auto;
}
Artículos (hijos):
Código:
#ultimas article {
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
break-inside: avoid-column;
display: inline-block;
}
Teóricamente el problema lo tendría en Firefox, que no hace funcionar correctamente
column-break-inside: avoid;, sin embargo al añadirle
display: inline-block; parece solventar el problema. Al menos, por ahora he probado añadiendo textos de distintas longitudes y lo representa bien. Es más, lo hace mejor que Chrome; y he aquí el problema.
En Chrome (y en IE10) me añade en la parte inferior del contenedor un espacio en blanco que no tiene sentido. Ni es padding, ni es margin. Es fruto de añadir
column-break-inside: avoid. Desde el inspector, cuando desactivo
avoid desaparece el espacio, y lo mismo si lo comento en el código y guardo para ver el resultado.
No le encuentro explicación, porque además si lo hago tal cual en jsFiddle no pasa, es decir que pasa en la plantilla que estoy haciendo. No sé si porque hereda algo...
He probado con añadirle
white-space: nowgrap, pre y pre-grap, pero tampoco.
Les dejo una imagen:
Y también el proyecto subido, para que le echen un vistazo al código a ver si saben dar con el error. Estoy desarrollándolo en
mobile-first, por lo que necesitan reducir la ventana del navegador para visualizar correctamente.
http://arodriguez.cc/MAYA/index.html
Podría dividirlo en dos divs y al carajo, pero le quitaría el dinamismo que ofrecen las multicolumnas, más teniendo en cuenta que tengo pensado adaptarlo a WP. Tampoco pretendo hacerlo en JS, porque meter una librería para 4 entradas que voy a representar en columnas tampoco lo veo muy óptimo.
En fin, espero que puedan ayudarme. Gracias de antemano.
Un cordial saludo!