Comment résoudre le problème du désalignement causé par des hauteurs de flotteur incohérentes

Solutions au désalignement causé par des hauteurs flottantes incohérentes : 1. Ajoutez "clear:left;" au premier élément à partir du saut de ligne ; 2. Définissez "font-size:0;" puis définissez simplement "display:inline-block;vertical-align:top;".

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur DELL G3.

Recommandé : Tutoriel vidéo CSS

Lorsque N éléments flottent, cela entraînera des problèmes de désalignement. Généralement, ce phénomène ne se produira pas si vous donnez à l'élément une hauteur fixe. Laissez-moi partager avec vous la solution lorsque la hauteur est incohérente.

Comment résoudre le désalignement causé par des hauteurs incohérentes des éléments flottants ?

1. La solution est d'ajouter clear:left; au premier élément à partir du saut de ligne.

Par exemple, lorsqu'il y a quatre colonnes, ce devrait être la 5ème et la 9ème...Ajoutez clear:left;

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

4n+1 Lors de la sélection d'une ligne de 4 colonnes, le premier élément de la ligne suivante

2. Ou définissez font-size:0 pour l'élément parent ; définissez la taille de police requise pour l'élément enfant flottant, puis définissez 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; 
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!