Wie kann ich Layoutverzerrungen verhindern, die durch schwebende Elemente mit variabler Höhe verursacht werden?

Layoutverzerrung bei schwebenden Elementen mit variabler Höhe

Beim Arbeiten mit Elementen mit variabler Höhe in einem schwebenden Layout kommt es nicht selten vor, dass Elemente größer sind Elemente drücken nachfolgende Geschwister nach unten und durchbrechen die beabsichtigte Gitterstruktur.

Betrachten Sie das folgende Beispiel: sechs Figurenelemente sind so konzipiert, dass sie zwei Dreierreihen bilden. Aufgrund der unterschiedlichen Höhen der Elemente ragt das vierte Figurenelement jedoch über die erste Reihe hinaus, wodurch das fünfte und sechste Element versetzt sind.

Das für dieses Beispiel verwendete CSS ist unkompliziert:

figure { width: 30%; float: left; margin-left: 1%; font-size: small; outline: solid #999 1px; }
img { max-width: 100%; }

Um die Layoutverzerrung zu beheben, können wir eine CSS-Regel einführen, die speziell auf das erste Element jeder Zeile abzielt. Indem wir den linken Float löschen, stellen wir sicher, dass nachfolgende Geschwister horizontal unter ihnen ausgerichtet werden.

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

Diese Regel löst das Ausrichtungsproblem, indem sie das vierte Figurenelement dazu zwingt, eine neue Zeile zu beginnen. Das fünfte und sechste Element werden anschließend korrekt unter den ersten drei positioniert.

Das aktualisierte Beispiellayout entspricht nun der beabsichtigten Reihenfolge, wobei jede Reihe aus drei gleichmäßig verteilten Figurenelementen besteht, unabhängig von deren Höhenunterschieden.

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