Astuce créer des mises en page réactives avec des flotteurs

Dans le conseil rapide d'aujourd'hui, nous allons apprendre à créer des mises en page réactives à l'aide des flottants CSS, une méthode de mise en page ancienne et pourtant fiable. Ceci fait, nous verrons comment Bootstrap gère les choses. Les flottants n'étaient pas initialement destinés à constituer la base de la structure de la page (les nouvelles normes CSS telles que flexbox et grid visent à résoudre ce problème); il est donc parfois difficile de travailler avec des flottants. Regardons un exemple pour illustrer cela.

Construire une mise en page réactive

Supposons que nous voulions construire cette carte:

Découvrez la version complète pour une idée plus claire.

Styles de base

Pour ces cartes, nous ne voulons pas définir une hauteur fixe pour les légendes. Nous ne voulons pas non plus qu'elles soient de largeur fixe. Par conséquent, pour que les cartes restent utilisables afin qu'elles ne soient pas trop écrasées, nous devons afficher un nombre de colonnes différent en fonction de la taille de la fenêtre d'affichage..

Nous avons configuré certaines requêtes de média, de sorte que ce qui suit est vrai:

Voici le balisage; liste les éléments contenant des images et des légendes dans les éléments de la figure:

Voici le CSS pour le style de cette mise en page:

/ * styles stylistiques * / body width: 80%; largeur maximale: 1200px; marge: auto 40px; police: normal 14px / 1.5 "Montserrat", "Helvetica Neue", sans serif; arrière-plan: # cfd8dc; couleur: # 37474f;  figure background: whitesmoke; marge: 0 0 40 px; box-shadow: 0px 2px 4px rgba (0,0,0,0,2);  figcaption padding: 20px;  img max-width: 100%; hauteur: auto; bloc de visualisation;  .clearfix: after content: ""; affichage: table; clarifier les deux;  ul margin: 0; rembourrage: 0;  / * styles structurels * / li type de style de liste: aucun; float: gauche; padding-left: 15px; padding-right: 15px; taille de la boîte: boîte-frontière;  / * requêtes multimédias * / @média et (min-largeur: 400px) li width: 50%;  @ Écran multimédia et (largeur minimale: 768 pixels) li largeur: 33,333%;  @ Écran multimédia et (largeur minimale: 1024 pixels) li largeur: 25%; 

Vous remarquerez les requêtes des médias en bas, qui déterminent la largeur des cartes dans certaines fenêtres. Voici ce que cela nous donne:

Le problème avec cette disposition fluide, cependant, est qu’en ne supprimant pas chaque nouvelle ligne, certaines cartes restent bloquées lorsqu’elles essaient de retrouver leur chemin vers la gauche..

Cartes d'identification à effacer

Selon l'exemple ci-dessus, lorsque la ligne contient quatre cartes, nous devons effacer la cinquième, puis la neuvième, etc. Pour ce faire, nous utilisons le : nième de type (an + b) Pseudo-classe CSS où le un + b paramètre représente le motif de répétition souhaité. Par exemple, sur les grands écrans (≥ 1024px), nous utilisons 4n + 1. Cette formule trouve chaque élément qui est un facteur de quatre, puis sélectionne le suivant un.

Voici comment nous pourrions modifier nos requêtes multimédia pour modifier les cartes qui sont effacées:

Et voici le CSS qui y parvient. Notez que nos requêtes multimédias sont cumulatives. Nous devons donc réinitialiser la carte de compensation précédente chaque fois que nous en définissons une nouvelle:

 Écran @média et (largeur minimale: 400px) li largeur: 50%;  li: nth de type (2n + 1) clear: left;  @ Écran multimédia et (largeur minimale: 768 pixels) li largeur: 33,333%;  li: nth de type (2n + 1) clear: none;  li: nth de type (3n + 1) clear: left;  @ Écran multimédia et (largeur minimale: 1024 pixels) li largeur: 25%;  li: nth de type (3n + 1) clear: none;  li: nième de type (4n + 1) clear: left; 

Enfin, il convient de mentionner les choses suivantes:

• À la place du clair: gauche valeur de la propriété, nous aurions également pu utiliser le plus générique clarifier les deux valeur de la propriété.
• À la place du : nième de type (an + b) Pseudo-classe CSS, nous aurions également pu utiliser la : nième enfant (an + b) pseudo-classe.
  

Maintenant que nous avons discuté d'une méthode de nettoyage des flotteurs, pour approfondir nos connaissances, examinons l'approche de Bootstrap..

Utilisation de la méthode Bootstrap

En tirant parti du système de grille de Bootstrap, nous sommes en mesure de créer une présentation réactive similaire à la précédente. Encore une fois, en fonction de la taille de la fenêtre d'affichage, notre disposition va changer:

Voici le code HTML requis, indiquant que nos éléments de liste remplissent six des douze colonnes des fenêtres d'affichage extrêmement petites, quatre colonnes pour les petites, puis trois colonnes pour les grandes fenêtres:

Normalement, ce balisage est tout ce dont nous avons besoin, en supposant que toutes les colonnes ont des hauteurs égales. Cependant, dans notre exemple, les colonnes ont des hauteurs différentes, nous devons donc vider les flotteurs. Pour ce faire, nous allons utiliser le clearfix classe ainsi que les classes utilitaires responsive.

Tout d'abord, sur des écrans très petits (<768px), we have a two column layout, therefore we should clear the floats after every second list item. Add the following markup after every second list item:

Ensuite, sur les petits et moyens écrans (≥768px et <1200px), we have a  three column layout, so we need to clear the floats after every third list item. To do this, we add some extra markup after every third list item (not necessary for the last one):

Enfin, sur les grands écrans (≥ 1200px), nous avons une disposition en quatre colonnes, nous devons donc vider les flotteurs après chaque quatrième élément de la liste. Encore une fois, ajoutez un balisage supplémentaire, cette fois après chaque quatrième élément de liste:

Ces blocs supplémentaires sont un peu désordonnés (beaucoup de gens n'aiment pas utiliser de balisage pour les styles de conduite), mais ils obtiennent le même résultat final que notre méthode initiale. Chaque élément de la liste est masqué, à l’exception de certains points d’arrêt quand ils supposent bloc de visualisation; agissant efficacement comme séparateurs horizontaux invisibles entre nos rangées.

Voici la démo associée:

Conclusion

Dans ce court article, nous avons présenté deux techniques simples pour créer des mises en page réactives avec des flotteurs. Bien que les flottants ne soient pas (et ne devraient pas être) le premier choix pour vos mises en page modernes, j'espère que ces techniques vous seront utiles à un moment donné. Si vous utilisez une autre technique, assurez-vous de la partager avec nous.!