So beheben Sie die Fehlausrichtung, die durch inkonsistente Schwimmerhöhen verursacht wird

Lösungen für Fehlausrichtungen, die durch inkonsistente Float-Höhen verursacht werden: 1. Fügen Sie „clear:left;“ ab dem Zeilenumbruch hinzu. 2. Definieren Sie „font-size:0;“ für das übergeordnete Element. display: inline-block;vertical-align:top;" reicht aus.

Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5- und CSS3-Version, DELL G3-Computer.

Empfohlen: CSS-Video-Tutorial

Wenn N Elemente schweben, führt dies zu Fehlausrichtungsproblemen. Im Allgemeinen tritt dieses Phänomen nicht auf, wenn Sie dem Element eine feste Höhe geben. Lassen Sie mich die Lösung mit Ihnen teilen, wenn die Höhe inkonsistent ist.

Wie kann die Fehlausrichtung behoben werden, die durch inkonsistente Höhen von Schwimmerelementen verursacht wird?

1. Die Lösung besteht darin, ab dem Zeilenumbruch „clear:left;“ zum ersten Element hinzuzufügen.

Wenn es beispielsweise vier Spalten gibt, sollte es die 5. oder 9. sein... Fügen Sie clear:left;

.row .col-lg-3:nth-child(4n+1),
.row .col-md-3:nth-child(4n+1){
    clear:left;
}

4n+1 hinzu. Bei Auswahl einer Zeile mit 4 Spalten das erste Element der nächsten Zeile

Zweitens oder definieren Sie die Schriftgröße für das übergeordnete Element :0; Das schwebende untergeordnete Element definiert die erforderliche Schriftgröße und definiert dann display:inline-block;vertical-align:top;

ul{ 
    margin:0; 
    padding:0; 
    list-style-type:none; 
    font-size:0; 
} 
ul li{ 
    width:160px; 
    display:inline-block; 
    vertical-align:top; 
    font-size:12px; 
}

Das obige ist der detaillierte Inhalt vonSo beheben Sie die Fehlausrichtung, die durch inkonsistente Schwimmerhöhen verursacht wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!