Wie kann ich falsch ausgerichtete Spalten beheben, die durch schwebende Elemente unterschiedlicher Höhe verursacht werden?

Floating-Elemente mit variabler Höhe stören die Spaltenanordnung

Bei der Arbeit mit Inhalten variabler Höhe in einem mehrspaltigen Layout kommt es häufig vor Es kann zu Problemen kommen, bei denen größere Elemente die korrekte Ausrichtung ihrer Geschwister verhindern. Dies kann auftreten, wenn Floats zum Positionieren der Elemente verwendet werden, da das höchste Element die nachfolgenden Elemente dazu zwingt, darunter zu schweben, wodurch die gewünschte Spaltenstruktur unterbrochen wird.

Um dieses Problem zu beheben, kann CSS verwendet werden, um eine Linie zu erstellen. Zeilenorientierte Ausrichtung der Elemente. Durch Hinzufügen der folgenden Regel kann das Layout korrigiert werden, ohne auf JavaScript oder jQuery zurückgreifen zu müssen:

figure:nth-of-type(3n+1) {
    clear:left;
}

In dieser Regel zielt nth-of-type(3n 1) auf das erste Element in jeder Zeile mit drei Elementen ab . Wenn Sie „clear:left“ auf dieses Element anwenden, wird der schwebende Kontext effektiv zurückgesetzt, sodass die nachfolgenden Elemente ordnungsgemäß darunter ausgerichtet werden können.

Diese einfache CSS-Änderung stellt sicher, dass die Elemente in der zweiten Zeile unter der ersten Zeile ausgerichtet werden, wodurch das erstellt wird gewünschte Spaltenstruktur unabhängig von den unterschiedlichen Inhaltshöhen innerhalb der Elemente.

Das obige ist der detaillierte Inhalt vonWie kann ich falsch ausgerichtete Spalten beheben, die durch schwebende Elemente unterschiedlicher Höhe verursacht werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!