Wie kann eine durch schwebende Elemente mit variabler Höhe verursachte Layoutverzerrung behoben werden?

Floating-Elemente mit variablen Höhen verzerren das Layout: Eine umfassende Lösung

Bei schwebenden Elementen unterschiedlicher Höhe kommt es häufig zu Layoutproblemen, wenn diese höher sind Elemente verhindern, dass nachfolgende Geschwister ordnungsgemäß ausgerichtet werden. Dies kann zu einem unerwünschten Erscheinungsbild führen, wie im Beispiel, bei dem eine Reihe schwebender Elemente aufgrund eines verlängerten Elements auseinanderbricht.

Um dieses Problem zu beheben, können wir CSS verwenden, um eine ordnungsgemäße Ausrichtung sicherzustellen. Indem wir die folgende Regel hinzufügen:

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

wir legen fest, dass jedes dritte Figurenelement seine linke Seite „freimachen“ soll. Dadurch wird die Float-Sequenz effektiv beendet und nachfolgende Elemente werden gezwungen, sich unter den ersten drei auszurichten.

Diese Lösung ist sowohl effizient als auch optisch ansprechend und behält das beabsichtigte Layout bei, ohne dass externe Tools wie JavaScript oder jQuery erforderlich sind.

Live-Demonstration

Sehen Sie sich das überarbeitete jsFiddle-Beispiel an, um die nahtlose Ausrichtung aller Figurenelemente unabhängig von ihrer Variation zu erleben Höhen: http://jsfiddle.net/KatieK/5Upbt/

Das obige ist der detaillierte Inhalt vonWie kann eine durch schwebende Elemente mit variabler Höhe verursachte Layoutverzerrung behoben werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!