it-swarm.com.de

Das mehrspaltige CSS-Layout von Listenelementen wird in Chrome nicht ordnungsgemäß ausgerichtet

Ich baue ein Menüsystem, das dem Benutzer im mehrspaltigen Format angezeigt wird. Die column-count -Eigenschaft in CSS3 bringt mich zu 90% dort hin, aber ich habe Probleme mit der Ausrichtung unter Chrome.

Die Speisekarte ist relativ einfach:

  • eine ungeordnete Liste, die durch die column-count-Eigenschaft in mehrere Spalten unterteilt ist
  • spalten sollten sequentiell gefüllt werden, also column-fill: auto
  • menüelemente werden als Listenelemente dargestellt
  • jedes Listenelement verfügt über ein anklickbares Ankertag, das vollständig über display erweitert wird: block

Das Ausrichtungsproblem, das ich habe, ist am deutlichsten mit einem oberen Rand und etwas Hintergrundfarbe für jedes Listenelement. In Firefox sind die Listenelemente immer sauber über die einzelnen Spalten ausgerichtet und verblassen nie in der vorherigen/nächsten Spalte. In Chrome ist die Ausrichtung eine Crapshoot-Aktion, die sich nach der Anzahl der vorhandenen Listenelemente und den Eigenschaften der Auffüllung/des Rands richtet.

Ich habe den Code für einen einfachen Testfall hier veröffentlicht: http://Pastebin.com/Ede3JwdG

Das Problem sollte sofort offensichtlich sein: In Chrome blutet der erste Listeneintrag in der zweiten Spalte in die erste Spalte zurück. Wenn Sie Listenelemente entfernen (klicken Sie darauf), können Sie feststellen, dass die Ausrichtung weiter zusammenbricht.

Ich habe versucht, die Auffüllung/den Rand für die Listenelemente ohne Erfolg zu optimieren: Chrome scheint einen fehlerhaften Algorithmus zu haben, wie er Inhalte über ein mehrspaltiges Layout überträgt.

Der Hauptgrund dafür, dass ich die Spaltenanzahl nicht gänzlich aufgegeben habe (zugunsten der manuellen Generierung/Columnizer/etc.), Ist, dass das Menüsystem auch Drag-and-Drop-Funktionen für mehrere Untermenüs umfasst und die Menüdaten angeordnet hat als zusammenhängende, auf Listen basierende Hierarchie sorgt für sauberen Code.

Gibt es eine Möglichkeit, das Ausrichtungsproblem in Chrome zu beheben, oder sollte ich Spaltenanzahl jetzt aufgeben?

HINZUGEFÜGT:

44
Ben D

Jedes Element in der Spalte muss als "Inline-Block" angezeigt werden. Dadurch wird Ihr Problem gelöst, ohne dass Sie jQuery verwenden müssen.

Außerdem kann jedes Element mit width: 100% angegeben werden, damit die gesamte Zeilenbreite verwendet werden kann.

Hier ist ein Arbeitsbeispiel:

$(document).ready(function() {
    for( var i = 0; i < 24; i++ ) {
        $("ul.newslist").append("<li><a href='#'>Item</a></li>");
    }
    $("ul.newslist > li").click(function() {
        $(this).remove();
    })
});
ul.newslist {
    columns: 5;
    background-color: #ccc;
    padding: 16px 0;
    list-style: none;
}

ul.newslist > li {
    display: inline-block;
    width: 100%;
    border-top: 1px solid #000;
}

ul.newslist > li > a {
    display: block;
    padding: 4px;
    background-color: #f6b;
    text-decoration: none;
    color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="newslist"></ul>

45
asiby

Es gelang mir, ungleichmäßige vertikal ausgerichtete Spalten auszugleichen, indem ich die margin-*-Eigenschaften auf die Elemente im mehrspaltigen Container anwendete.

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

Ich habe auch herumgespielt und mehrere Quellen, die ich online gesehen habe, lassen es als ein bekanntes Problem mit dem Webkit erscheinen. Eine gute Aufschlüsselung finden Sie hier: http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/

Eines Tages CSS 3!

Vielleicht versuchen Sie es mit einem jQuery-Plugin wie http://welcome.totheinter.net/columnizer-jquery-plugin/ ?

16
Jack Lawson

Wie bei vertikalem Randverlust. Sie können den Rand durch ein Pseudoelement ersetzen. Stellen Sie dann die Höhe auf den gewünschten Randwert ein. Sie müssen auch -webkit-column-break-inside: avoid; für das Element mit dem Pseudoelement festlegen, damit es nicht in eine andere Spalte verschoben wird. Tun Sie dies nur für Webkits mit Hilfe von css-hack (nicht empfohlen) oder js-detection (am besten so). Hier ist CSS: 

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

Ich hatte Probleme mit der vertikalen Ausrichtung auf einer mehrspaltigen Liste. Es stellte sich heraus, dass das Problem darin bestand, dass ich das Padding unten auf meiner Liste verwendet habe.

5
Julie Olson

Ich löste dies, indem ich vertikale Ränder an den untergeordneten Elementen entfernte und dann die Zeilenhöhe der untergeordneten Elemente vergrößerte, um den gewünschten Abstand zu reproduzieren.

Ich bemerkte auch, dass ich dieses Problem der vertikalen Ausrichtung beheben konnte, indem ich die Randbereiche der Kinder entfernte und sie in Enkelkissen konvertierte.

2

Mein gewünschtes Ergebnis war der Wunsch, eine große Liste von Links für die Anzeige in 3 Spalten zu erhalten. Die einfache Verwendung von column-break-inside:avoid; alleine hat im Webkit nicht funktioniert.

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

Lösung (fragen, wenn du willst)

Ich fügte einen 1px-Rahmen um die Listenelemente hinzu, der die Ränder der untergeordneten Elemente zu enthalten schien, und jede Spalte wurde nach oben ausgerichtet.

Edit: Dies scheint nur erforderlich zu sein, wenn Sie globalen border-box verwenden.

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

Ich habe auch damit zu kämpfen, für ein Berichtssystem mit vielen vielen Daten und Titeln mit Abstand/Abstand, die ich für mehrere Bildschirme in mehrere Spalten fließen muss.

Ich habe um meinen ersten großen Dealbreaker, die Auffüllung des ursprünglichen Titelelements, mit der :first-child-Pseudoklasse gearbeitet (dies ist in einer @media-Regel für Breitbildschirme enthalten, die hier nicht gezeigt werden):

Die Spaltendefinition:

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

Auffüllen der Auffüllung oben in .multicol

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

Das Auffüllen und den Rand für das erste Element werden abgebrochen (color: blue; ist so, dass ich sehe, ob die Regel greift):

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

Bisher sieht das in meinem Firefox viel besser aus. Ich werde sehen, ob es noch ein bisschen mehr zu tun gibt, aber derzeit in Firefox sieht der Text oben aus, was das Wichtigste ist. 

BEARBEITEN: Das Problem scheint bei Webkit-basierten Browsern tatsächlich noch schlimmer zu sein. Um es vollständig zu lösen, habe ich die Vorlage geändert, um einen <div></div>around für alle Titelbereiche zu haben, sodass ich am Ende der Divs Padding/Margin hinzufügen kann und nicht am Anfang der Titel. In Webkit-Browsern sieht es jetzt auch gut aus.

Übrigens, die Verwendung von Prozentwerten in mehrspaltigen Spalten ist ziemlich kompliziert, da der Prozentsatz auf die Breite der Spalte und nicht auf die globale Breite des übergeordneten Elements berechnet wird. Ich habe dies geändert, indem Sie das übergeordnete Element der Spalten mit Füllzeichen versehen.

Die größte Schwierigkeit besteht jedoch darin, dass Firefox keine Spaltenumbrüche oder Break-In-Eigenschaften unterstützt. Wenn ich also nur sehr wenig Inhalt habe, wird es über die Spalten verteilt, wie eine oder zwei Zeilen pro Zeile. Nochmals, Smarty zur Rettung:

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

Soweit funktioniert es jetzt bei mir ...

0
Joel.O