Solo lectura

Google Chrome - Foro de ayuda

Esta página web es un archivo de los hilos antiguos de los foros de Google. Más información
Google Chrome - Foro de ayuda > Column-count y display: inline-block de sus contenido, con la actualización no funciona

Column-count y display: inline-block de sus contenido, con la actualización no funciona

Raul Garcia Castilla
1/09/16 0:52
Buenos dias, 

Maqueté una web con la version 51 y cuando se lanzó todo funcionaba perfecto, desde la actualización a la version 52 no funciona, ahora con la 53 tampoco.

El tema es que tengo un div con la propiedad de las columns, a este le introduzco un listado y cada LI tiene la propiedad inline-block para que se separen por bloques, pues bien, solo me hace dos columnas en vez de 4 y no me ocupa el ancho total del bloque, las columnas saltan una debajo de la otra haciendo un grid de dos, el caso es que en firefox funciona perfect, en internet explorer y edge aunque parezca raro, también va pero como comento desde la actualización de chrome no funciona.

Así se ve en Firefox y Edge


Esto es lo que hace Chrome en versiones superiores a la 51



El CSS es el siguiente:


.columnsCSS {

    -webkit-column-count: 4;

    -moz-column-count: 4;

    column-count: 4;

    column-gap: 5.2em;

    -moz-column-gap: 5.2em;

    -webkit-column-gap: 5.2em;

    padding: 40px 55px;

}


.columnsCSS ul.serveisList li {

    display: inline-block;

    padding-left: 0;

    line-height: 1.4em;

}


Y el HTML del column + un LI:


<div class="columnsCSS">

<ul class="serveisList">

<li>

<img src="images/icons/serveis-02.svg" alt="abogados matrimonialistas"><h2>Matrimonios</h2>

<div class="text">Nuestra meta es conseguirte el mejor acuerdo. Intentaremos evitar, siempre que no sea inevitable, llegar a juicio.

En rupturas familiares desarrollamos nuestro trabajo primando siempre que los niños queden preservados del proceso y buscando la protección de sus derechos.

Nuestra prioridad eres tú y tu familia, no te tratamos como un número, sino que te dedicamos todo el tiempo que necesitas.</div>

<div class="mas"><a href="matrimonialistas-barcelona" title="abogados divorcio barcelona">

Leer más</a></div>

</li>



Gracias!

Respuestas (6)

Nico S.
1/09/16 10:10
Hola Raul Garcia Castilla!

Encontré en la página de bugs un reporte similar al tuyo, lo puedes ver aquí

Es probable que se trate de un error en Chrome, pero me gustaría poder darle un vistazo extra. ¿Podrías pasarnos el link donde podamos ver la página en funcionamiento? No te olvides de usar goo.gl para acortar el enlace y evitar que Google lo indexe. 

Un Saludo.
Para continuar con la conversación, debes regresar al foro.
Las respuestas por correo electrónico no llegan  Acceder al foro
Raul Garcia Castilla
1/09/16 10:13
Muchas gracias por contestar, el link es el siguiente http://goo.gl/anaa22
Gracias por tu ayuda
Raul Garcia Castilla
5/09/16 0:59
Hola Nico, este fin de semana también lo mire en el MAC de un amigo e incluso en safari se ve correctamente. Si se debe a un fallo de Chrome, no podemos saber cuando volverá a funcionar no? me he descargado la versión developer que es la 54 y aún persiste este fallo....
Bruno deguil-robin
9/09/16 6:26
hola, 
para tratar este problema : 
para chrome 52 y mas debe hacer un hack en el css :
.column div:not(*:root) {
    display:block;
}
el display inline-block es el problema.
functiona con los otros navegatores pero no desde chrome 52

frances:
pour traiter le probleme il faut faire un hack css pour chrome car le probleme vient du display:inline des elements mis en colonne.
il faut spécifier disply:block pour chrome 52 soit directement dans le css soit dans un js.

saludo

Raul Garcia Castilla
12/09/16 2:28
Buenas,

He intentado lo que comentas pero sigue sin funcionar, el problema es cuando le dices que el display es inline-block, y es lo que realmente necesito, si lo pongo como block lo que sucede es que no respeta los divs y los divide.

Lo que no entiendo porque en este ejemplo funciona con la misma estructura que yo:


o incluso más, en esta otra web


Los iconos debajo del slide funcionan perfectamente, en cambio, las noticias que están debajo he tenido que remaquetarlo porque las columnas no funcionaban, con la misma estructura, es algo incomprensible, mientras que el resto de navegadores funciona todo a la perfección.... 
Raul Garcia Castilla
12/09/16 3:15
Veo que funciona mejor o peor dependiendo del número de items, como el ejemplo que he pasado antes (http://goo.gl/lR3eLa) en cambio si tienes por ejemplo 4 items y quieres 4 columnas no funciona, de hecho si eliminas divs del ejemplo que paso, llega un momento que tampoco hace de manera correcta la división de columnas.