La mise en page multi-colonnes des éléments de la liste CSS ne s'aligne pas correctement dans Chrome

j'ai réussi à équilibrer les colonnes alignées verticalement inégales en appliquant les propriétés margin-* aux éléments à l'intérieur du conteneur multicolumn.

.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;
}

j'ai joué aussi bien, et plusieurs sources que j'ai vu en ligne le font sembler être un problème connu avec webkit. Une bonne répartition peut être trouvée ici: http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/

un jour, CSS 3!

peut-être essayer un plugin jQuery comme http://welcome.totheinter.net/columnizer-jquery-plugin / ?

comme pour les fuites de marges verticales. Vous pouvez remplacer marge par pseudo-élément. Ensuite, réglez sa hauteur à la valeur de marge désirée. Vous devez aussi mettre -webkit-column-break-inside: avoid; sur l'élément contenant le pseudo-élément pour qu'il ne soit pas déplacé vers une autre colonne. Faites cela seulement pour webkit avec l'aide de CSS-hack (non recommandé) ou js-detection (meilleure façon). Voici CSS:

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

j'avais des problèmes avec l'alignement vertical sur une liste à plusieurs colonnes. Il s'est avéré que le problème était que j'utilisais le rembourrage du bas sur ma liste de li -- j'ai changé le style de li pour utiliser une marge du bas à la place, et les colonnes alignées vers le haut à nouveau.

j'ai résolu cela en enlevant les marges verticales sur les éléments enfants, puis en augmentant la ligne-hauteur des enfants pour répliquer l'espacement désiré.

j'ai aussi remarqué que je pouvais corriger ce problème d'alignement vertical en enlevant les marges des enfants et en les convertissant en rembourrage pour petits-enfants.

mon résultat souhaité était de vouloir obtenir une grande liste de liens à afficher en 3 colonnes. Le simple fait d'utiliser column-break-inside:avoid; seul ne fonctionnait pas dans 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;
}

Solution (quirk si vous voulez)

j'ai ajouté une bordure 1px autour des éléments de la liste qui semblait contenir les marges de ses enfants et chaque colonne ensuite alignée sur le haut.

Edit: Cela semble être nécessaire si vous utilisez mondial border-box

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

je me bats avec cela aussi, pour un système de rapport avec beaucoup de données et de titres avec rembourrage/marge que je dois faire circuler sur plusieurs colonnes pour des écrans plus larges.

j'ai travaillé autour de mon premier big deal-breaker, le remplissage de l'élément de titre initial, avec la pseudo-classe :first-child (ceci est inclus dans une règle @media pour les écrans larges non montré ici):

les colonnes définition:

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

Annulation de rembourrage sur le dessus lors de .multicol

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

annulation du rembourrage et de la marge pour le premier élément ( color: blue; est de sorte que je vois si la règle attrape):

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

pour l'instant, ça a l'air bien plus net dans mon Firefox. Je vais voir s'il y a plus de bricolage à faire mais actuellement dans Firefox le texte semble aligné sur le dessus, ce qui est le plus important.

EDIT : Le problème semble bien pire avec les navigateurs webkit en effet. Pour le résoudre entièrement, j'ai modifié le modèle afin d'avoir un <div></div> autour de toutes les sections intitulées de sorte que je puisse ajouter le rembourrage / marge à la fin des divs et non pas au début des titres. Maintenant dans les navigateurs webkit il semble très bien aussi.

BTW, en utilisant des mesures de pourcentages dans multicolumns est assez délicat parce que le pourcentage semble calculé à la largeur de la colonne et non à la largeur globale de l'élément parent. J'ai changé ce en ajoutant du rembourrage dans l'élément parent des colonnes.

mais la plus grande difficulté est que Firefox ne supporte pas les propriétés colonne-span ou break-in, donc quand j'ai très peu de contenu, il est réparti sur les colonnes néanmoins, comme une ou deux lignes sur chaque. Encore une fois, Smarty à la rescousse:

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

Jusqu'à présent ça marche maintenant pour moi...

c'est la solution pour multicolonnes de l'espace problème

ul li { line-height:40px; }