Wie kann ich Layouts reparieren, die durch schwebende Elemente mit unterschiedlichen Höhen unterbrochen wurden?

Floatierte Elemente mit unterschiedlichen Höhen unterbrechen das Layout

Bei der Arbeit mit schwebenden Elementen mit variablen Höhen kann die Aufrechterhaltung eines sauberen Layouts eine Herausforderung sein. Ein solches Szenario ist, wenn einige Elemente größer sind als andere, was dazu führt, dass nachfolgende Geschwister nicht mehr richtig ausgerichtet sind.

Um dieses Problem anzugehen, bietet CSS eine clevere Lösung:

CSS-Regel für Ausrichten von schwebenden Elementen

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

Diese Regel weist den Browser an, die schwebenden Elemente zu löschen Elementealle drei Elemente, beginnend mit dem ersten. Mit anderen Worten:

• Nach dem ersten, vierten und siebten Element wird der Float gelöscht, sodass nachfolgende Geschwister eine neue Zeile beginnen können.
• Dadurch wird sichergestellt, dass die zweite Zeile von Elemente werden direkt unter den ersten drei ausgerichtet, unabhängig von ihrer Höhen.

Beispiel

Berücksichtigen Sie das bereitgestellte HTML und CSS:

<figure> // Figure 1
    ...
</figure>
<figure> // Figure 2
    ...
</figure>
<figure> // Figure 3
    ...
</figure>
<figure> // Figure 4
    ...
</figure>
<figure> // Figure 5
    ...
</figure>
<figure> // Figure 6
    ...
</figure>

figure {
    width: 30%;
    float: left;
    ...
}

Durch Hinzufügen der Regel „clear: left“. :

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

Das Layout wurde korrigiert und die zweite Zahlenreihe wird unterhalb der ersten ausgerichtet Drei:

[Bild: Korrigiertes Layout mit zweiter Reihe von Zahlen, die unter den ersten drei ausgerichtet sind]

Fazit

Nutzung der Clear: Left-Regel bietet Eine elegante und effiziente Methode, um sicherzustellen, dass schwebende Elemente unterschiedlicher Höhe richtig ausgerichtet sind und ein sauberes und organisiertes Layout erhalten bleibt.

Das obige ist der detaillierte Inhalt vonWie kann ich Layouts reparieren, die durch schwebende Elemente mit unterschiedlichen Höhen unterbrochen wurden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!