Maison >interface Web >tutoriel CSS >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!