CSS wielokolumnowy układ elementów listy nie wyrównuje się poprawnie w Chrome

Udało mi się zrównoważyć nierówne kolumny wyrównane pionowo, stosując właściwości margin-* do elementów wewnątrz kontenera wielokolumnowego.

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

Grałem również i kilka źródeł, które widziałem w internecie, sprawiają, że wydaje się to być znany problem z webkit. Dobry podział można znaleźć tutaj: http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/

Pewnego dnia, CSS 3!

Może spróbuj wtyczki jQuery jak http://welcome.totheinter.net/columnizer-jquery-plugin / ?

Co do wycieku marginesów pionowych. Margines można zastąpić pseudoelementem. Następnie ustaw jego wysokość na żądaną wartość marginesu. Musisz również ustawić -webkit-column-break-inside: avoid; na elemencie zawierającym pseudo-element, aby nie został przeniesiony do innej kolumny. Zrób to tylko dla webkit za pomocą css-hack (niezalecane) lub js-detection (najlepszy sposób). Oto CSS:

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

Miałem problem z wyrównaniem pionowym na liście wielokolumnowej. Okazało się, że problem polegał na tym, że używałem dolnego paddingu na mojej liście li-zmieniłem styl li, aby zamiast tego użyć dolnego marginesu, a kolumny ponownie wyrównały się do góry.

Moim pożądanym rezultatem była chęć uzyskania dużej listy linków do wyświetlenia w 3 kolumnach. Samo użycie column-break-inside:avoid; nie zadziałało w 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 if you will)

Dodałem obramowanie 1px wokół elementów listy, które wydawało się zawierać marginesy jego dzieci i każda kolumna następnie wyrównane do góry.

Edit: to wydaje się być wymagane tylko wtedy, gdy używasz global border-box

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

Rozwiązałem to, usuwając pionowe marginesy na elementach potomnych, a następnie zwiększając wysokość linii dzieci, aby odtworzyć żądane odstępy.

Zauważyłem również, że mogę naprawić ten problem z wyrównaniem pionowym, usuwając marginesy potomne i konwertując je na padding wnuka.

Walczę z tym również, dla systemu raportowania z wieloma wieloma danymi i tytułami z wypełnieniem / marginesem, które muszę przepływać na kilku kolumnach dla szerszych ekranów.

Pracowałem wokół mojego pierwszego big deal-breaker, padding początkowego elementu title, z pseudo-klasą :first-child (jest to wliczone w regułę @ media dla szerokich ekranów nie pokazanych tutaj):

Definicja kolumny:

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

Anulowanie wyściółki na górze, gdy w .multicol

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

Anulowanie padding and margin for the first element (color: blue; is so that I see if the rule catches):

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

Jak na razie wygląda to znacznie lepiej w moim Firefoksie. Zobaczę, czy jest jeszcze coś do zrobienia, ale obecnie w Firefoksie tekst wygląda wyrównany na górze, co jest najważniejsze.

Edytuj : Problem wydaje się znacznie gorszy w przypadku przeglądarek opartych na webkit. Aby rozwiązać go całkowicie, zmodyfikowałem szablon, aby mieć <div></div>wokół wszystkich tytułowych sekcji, dzięki czemu mogę dodać padding / margines na końcu div, a nie na początku tytułów. Teraz w przeglądarkach webkit też wygląda dobrze.

BTW, używanie procentów w wielokolumnach jest dość trudne, ponieważ procent wydaje się obliczany na szerokość kolumny, a nie globalną Szerokość elementu nadrzędnego. Zmieniłem to dodając padding w elemencie nadrzędnym kolumn.

Ale największą trudnością jest to, że Firefox nie obsługuje żadnych właściwości rozpiętości kolumn lub włamania, więc kiedy ma bardzo mało treści, jest rozłożona na kolumnach, podobnie jak jedna lub dwie linie na każdej. Znowu Smarty na ratunek:

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

Jak na razie to działa dla mnie...

Szukając informacji na ten temat natknąłem się na twoje pytanie i dzisiaj sprawdzałem elementy listy.

Stwierdziłem, że element UL stosuje margines tylko w pierwszej kolumnie.

Po prostu zastosuj 0 padding i margin w css i będą one wyrównane

margin:0;
padding:0;

Hope it helps

Jest to rozwiązanie problemu przestrzeni wielokolumnowej

ul li { line-height:40px; }