Maison interface Web tutoriel CSS Comment implémenter une grille flexible à l'aide de la disposition CSS Positions

Comment implémenter une grille flexible à l'aide de la disposition CSS Positions

Sep 27, 2023 pm 04:42 PM
布局 css positions maille élastique

如何使用CSS Positions布局实现弹性网格

Comment utiliser la disposition des positions CSS pour implémenter une grille élastique

La disposition des positions CSS est une méthode couramment utilisée dans la mise en page des pages Web. Elle peut obtenir l'effet d'une grille élastique et permettre aux éléments de la page Web d'être affichés de manière adaptative sur différents appareils. Dans cet article, nous présenterons comment utiliser la disposition CSS Positions pour implémenter une grille élastique et fournirons des exemples de code spécifiques.

1. Comprendre la disposition des positions CSS

Avant de commencer la mise en œuvre, vous devez d'abord comprendre les concepts et les caractéristiques de la disposition des positions CSS. La disposition des positions CSS fait référence au contrôle de la position et de la taille des éléments à l'aide de l'attribut position et des attributs haut, bas, gauche, droite et autres en CSS. Il existe quatre valeurs couramment utilisées pour l'attribut position : statique, relative, absolue et fixe. Lors de l'implémentation de grilles élastiques, nous utilisons généralement des valeurs relatives ou absolues.

  1. relatif : Positionnement relatif, l'élément est positionné par rapport à sa position normale. Modifiez la position de l'élément en définissant les attributs haut, bas, gauche et droite.
  2. absolu : Positionnement absolu, l'élément est positionné par rapport à son élément parent positionné le plus proche. S'il n'y a aucun élément parent positionné, il est positionné par rapport au corps.

2. Exemple de code pour implémenter une grille élastique

Ce qui suit est un exemple de code pour implémenter une grille élastique en utilisant la disposition CSS Positions :

Code HTML :

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>
Copier après la connexion

Code CSS :

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  height: 400px;
}

.item {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  margin-bottom: 20px;
  position: relative;
}

.item:nth-child(2n) {
  position: absolute;
  top: 0;
  right: 0;
}

.item:nth-child(2n+1) {
  position: absolute;
  bottom: 0;
  left: 0;
}
Copier après la connexion

Dans le code ci-dessus, nous créons d'abord un conteneur contenant quatre éléments enfants, et utilisez display: flex pour disposer les éléments enfants horizontalement. Utilisez ensuite flex-wrap: wrap; et justification-content: space-evenly pour obtenir une mise en page flexible et un alignement central horizontal. Ensuite, définissez le style de chaque élément enfant sur une largeur de 200 px, une hauteur de 200 px, une couleur d'arrière-plan de #f2f2f2, une marge inférieure de 20 px et une position : relative ;.

En définissant le style de .item:nth-child(2n) sur position : absolue;, haut : 0;, droite : 0;, et le style de .item:nth-child(2n+1) sur position : absolu;, bottom: 0;, left: 0;, nous pouvons positionner les éléments enfants pour obtenir l'effet de grille élastique.

Avec la disposition CSS Positions ci-dessus et en nous référant à l'exemple de code ci-dessus, nous pouvons facilement implémenter une grille flexible qui peut s'adapter aux effets d'affichage de différents appareils.

Résumé :

L'utilisation de la mise en page CSS Positions peut obtenir un effet de grille flexible, permettant aux éléments de la page Web d'être affichés de manière adaptative sur différents appareils. Lors de la mise en œuvre de grilles élastiques, nous utilisons généralement des valeurs relatives ou absolues, combinées avec des attributs haut, bas, gauche, droite et autres pour contrôler la position et la taille des éléments. J'espère que cet article pourra vous aider à comprendre et à utiliser la disposition CSS Positions pour implémenter une grille élastique.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Musée à deux points: toutes les expositions et où les trouver
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Musée à deux points: toutes les expositions et où les trouver
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Windows 11 : le moyen simple d'importer et d'exporter des mises en page de démarrage Windows 11 : le moyen simple d'importer et d'exporter des mises en page de démarrage Aug 22, 2023 am 10:13 AM

Windows 11 : le moyen simple d'importer et d'exporter des mises en page de démarrage

Comment enregistrer la disposition de la position des icônes du bureau dans Windows 11 Comment enregistrer la disposition de la position des icônes du bureau dans Windows 11 Aug 23, 2023 pm 09:53 PM

Comment enregistrer la disposition de la position des icônes du bureau dans Windows 11

Guide pour résoudre le désalignement des pages Web WordPress Guide pour résoudre le désalignement des pages Web WordPress Mar 05, 2024 pm 01:12 PM

Guide pour résoudre le désalignement des pages Web WordPress

Comment créer une mise en page carrousel réactive en utilisant HTML et CSS Comment créer une mise en page carrousel réactive en utilisant HTML et CSS Oct 20, 2023 pm 04:24 PM

Comment créer une mise en page carrousel réactive en utilisant HTML et CSS

Compétences d'application flexibles de l'attribut de poste en H5 Compétences d'application flexibles de l'attribut de poste en H5 Dec 27, 2023 pm 01:05 PM

Compétences d'application flexibles de l'attribut de poste en H5

Robot ETF (562500) pourrait ouvrir la voie à une bonne opportunité de mise en page car il a reculé pendant 3 jours consécutifs ! Robot ETF (562500) pourrait ouvrir la voie à une bonne opportunité de mise en page car il a reculé pendant 3 jours consécutifs ! Dec 01, 2023 pm 04:01 PM

Robot ETF (562500) pourrait ouvrir la voie à une bonne opportunité de mise en page car il a reculé pendant 3 jours consécutifs !

Présentation de la méthode de disposition des fenêtres dans Win7 Présentation de la méthode de disposition des fenêtres dans Win7 Dec 26, 2023 pm 04:37 PM

Présentation de la méthode de disposition des fenêtres dans Win7

Windows 11 continue d'ajouter des dispositions de clavier : 4 solutions testées Windows 11 continue d'ajouter des dispositions de clavier : 4 solutions testées Dec 14, 2023 pm 05:49 PM

Windows 11 continue d'ajouter des dispositions de clavier : 4 solutions testées

See all articles