css - varias - justify-content

El diseño de varias columnas CSS de los elementos de la lista no se alinea correctamente en Chrome

Question

Estoy creando un sistema de menú presentado al usuario en formato de varias columnas. La propiedad de conteo de columnas en CSS3 me da el 90% del camino, pero tengo problemas con la alineación en Chrome.

El menú es relativamente simple:

• una lista desordenada dividida en múltiples columnas por la propiedad de conteo de columnas
• las columnas deben llenarse secuencialmente, por lo tanto, column-fill: auto
• los elementos de menú se representan como elementos de lista
• Cada elemento de la lista tiene una etiqueta de anclaje en la que se puede hacer clic, extendida completamente a través de la pantalla: bloque

El problema de alineación que tengo es más notable con un borde superior y algunos colores de fondo en cada elemento de la lista. En Firefox, los elementos de la lista siempre se alinean limpiamente en cada columna, sin sangrar nunca en la columna anterior / siguiente. En Chrome, la alineación es un crapshoot, que varía según la cantidad de elementos de la lista y las propiedades de relleno / margen.

He publicado el código para un caso de prueba simple aquí: http://pastebin.com/Ede3JwdG

El problema debe ser evidente de inmediato: en Chrome, el primer elemento de la lista en la segunda columna vuelve a aparecer en la primera columna. A medida que elimina los elementos de la lista (haga clic en ellos), puede ver que la alineación se desglosa aún más.

He intentado ajustar el relleno / margen de los elementos de la lista en vano: Chrome parece tener un algoritmo defectuoso de cómo fluye el contenido a través de un diseño de varias columnas.

La razón principal por la que no he descartado el recuento de columnas (a favor de la generación manual / Columnizer / etc.) Es que el sistema de menús también implica la función de arrastrar y soltar en varios submenús, y tener los datos del menú establecidos como una jerarquía cohesiva basada en listas hace un código limpio.

¿Hay alguna manera de solucionar el problema de alineación en Chrome o debo renunciar al recuento de columnas por ahora?

ADICIONAL:

• Prototipo de jsFiddle: http://jsfiddle.net/VXsAU/
• Prototipo de JS Bin: http://jsbin.com/ebode5/

Answer 1

En cuanto a márgenes verticales de fugas. Puedes reemplazar el margen con un pseudo-elemento. A continuación, establezca su altura al valor de margen deseado. También necesitas configurar -webkit-column-break-inside: avoid; en el elemento que contiene el pseudo-elemento para que no se mueva a otra columna. Hágalo solo para webkit con la ayuda de css-hack (no recomendado) o js-detection (la mejor manera). Aquí está el CSS:

.element {
  -webkit-column-break-inside: avoid;
}
.element:after {
  content: '''';
  display: block;
  height: 20px;
}

Answer 2

Esta es la solución para problemas de espacio de columnas múltiples.

ul li { line-height:40px; }

Answer 3

Estaba teniendo problemas con la alineación vertical en una lista de varias columnas. Resultó que el problema era que estaba usando el relleno inferior en mi lista de li. Cambié el estilo li para usar un margen inferior y las columnas se alinearon hacia arriba nuevamente.

Answer 4

Logré equilibrar las columnas desiguales alineadas verticalmente aplicando las propiedades de margin-* a los elementos dentro del contenedor de margin-* columnas.

.content {
  column-width: 15em; /* or could be column-count, however you want to set up multi columns */
}
.content > section {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}

Answer 5

Mi resultado deseado fue querer obtener una gran lista de enlaces para mostrar en 3 columnas. Simplemente usando la column-break-inside:avoid; solo no funcionó en webkit.

HTML

<div class="links">
  <ol>
    <li><a>link</a></li> <!-- x 50 -->
  </ol>
</div>

css:

.links ol {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

.links li {
  display: block;
  border: 1px solid $background-colour; //to appear invisible
  -moz-column-break-inside:avoid;
  -webkit-column-break-inside:avoid;
  column-break-inside:avoid;
}

.links a {
  display: block;
  margin-bottom: 10px;
}

Solución (peculiar si quieres)

Agregué un borde de 1px alrededor de los elementos de la lista que parecía contener los márgenes de sus hijos y cada columna se alineaba en la parte superior.

Edición: esto solo parece ser necesario si está utilizando un border-box global

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Answer 6

Necesita que cada elemento de la columna se muestre como "bloque en línea". Eso resolverá tu problema sin necesidad de usar jQuery.

Answer 7

Resolví esto eliminando los márgenes verticales en los elementos secundarios y luego aumentando la altura de la línea de los niños para replicar el espacio deseado.

También me di cuenta de que podía solucionar este problema de alineación vertical eliminando los márgenes secundarios y convirtiéndolo en relleno para nietos.

Answer 8

También estoy luchando con esto, para un sistema de informes con muchos datos y títulos con relleno / margen que necesito para fluir en varias columnas para pantallas más anchas.

Trabajé en torno a mi primer gran factor decisivo, el relleno del elemento del título inicial, con :first-child pseudo-clase de :first-child (esto está incluido en una regla de @media para pantallas panorámicas que no se muestra aquí):

La definición de las columnas:

.dimSlider .multicol {
  -moz-columns: 4;
  -webkit-columns: 4;
  columns: 4;
}

Cancelando el relleno en la parte superior cuando en .multicol

.dimSlider .multicol h3 {
  padding-top: 0;
}

Cancelando el relleno y el margen para el primer elemento ( color: blue; es para ver si la regla se engancha):

.dimSlider .multicol .criteria:first-child h3 {
  padding: 0 2%;
  margin: 0;
  color: blue;
}

Hasta ahora, esto se ve mucho mejor en mi Firefox. Veré si hay más retoques que hacer pero actualmente, en Firefox, el texto se ve alineado en la parte superior, lo que es lo más importante.

EDIT: El problema parece bastante peor con los navegadores webkit de hecho. Para resolverlo por completo, modifiqué la plantilla para tener un <div></div> alrededor de todas las secciones tituladas para que pueda agregar relleno / margen al final de los divs y no al principio de los títulos. Ahora en los navegadores webkit se ve bien también.

Por cierto, el uso de mediciones de porcentajes en multicolumnas es bastante complicado porque el porcentaje parece calculado al ancho de la columna y no al ancho global del elemento padre. Cambié esto agregando el relleno en el elemento padre de las columnas.

Pero la mayor dificultad es que Firefox no admite ninguna propiedad de intervalo de columnas o de separación, por lo que cuando tengo muy poco contenido, se extiende sobre las columnas, como una o dos líneas en cada una. Una vez más, Smarty en el rescate:

{if $element|@count <= 10}
<div class="nocol"> 
{/if} 

Hasta ahora funciona para mí ...

Answer 9

También he jugado, y varias fuentes que he visto en línea parecen ser un problema conocido con webkit. Puede encontrar un buen desglose aquí: http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/

Algún día, CSS 3!

¿Quizás intentes un plugin de jQuery como http://welcome.totheinter.net/columnizer-jquery-plugin/ ?