Wie kann ich überlappende schwebende Elemente mit unterschiedlichen Höhen verhindern?

Floatierte Elemente mit unterschiedlichen Höhen: Geschwisterverschiebung vermeiden

Floatierte Elemente bieten eine praktische Methode zum horizontalen Ausrichten von Inhalten. Wenn diese Elemente jedoch unterschiedliche Höhen haben, kann es zu unerwarteten Layoutproblemen kommen. In diesem Fall können größere Elemente die ordnungsgemäße Ausrichtung nachfolgender Geschwister behindern.

Um dieses Problem zu lösen, bietet CSS mehrere Techniken. Ein solcher Ansatz nutzt den nth-of-type()-Selektor, um bestimmte Elemente anhand ihrer Position in einer Sequenz zu identifizieren. In diesem Fall können wir die Regel :nth-of-type(3n 1) verwenden, um einen bestimmten Stil auf das erste Element jedes dritten Satzes schwebender Elemente anzuwenden.

Durch das Hinzufügen dieser CSS-Eigenschaft definieren wir dies Jedes dritte schwebende Element sollte die vorherigen schwebenden Elemente löschen und sicherstellen, dass die zweite Reihe unter der ersten ausgerichtet ist:

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

Diese Technik setzt das schwebende Verhalten für die angegebenen Elemente effektiv zurück, sodass sie gestartet werden können eine neue Zeile, wodurch das Überlappungsproblem behoben wird.

Um dies in Aktion zu veranschaulichen, besuchen Sie das aktualisierte JSFiddle-Beispiel: [](https://jsfiddle.net/KatieK/5Upbt/).

Das obige ist der detaillierte Inhalt vonWie kann ich überlappende schwebende Elemente mit unterschiedlichen Höhen verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!