Dans cet article, nous discuterons de chacune des approches mentionnées une par une et fournirons un exemple approprié de chaque méthode.
Alors, commençons!
Méthode 1 : Placer deux Divs côte à côte dans CSS à l'aide de la grille
Le SSC ' la grille La mise en page permet à l'utilisateur de placer deux ou plusieurs divs côte à côte. Fondamentalement, la grille est une valeur de la propriété d'affichage utilisée pour créer une mise en page composée de lignes et de colonnes.
Syntaxe
La syntaxe de la propriété d'affichage avec disposition en grille est donnée ci-dessous :
affichage : grille
Maintenant, regardons un exemple lié au placement de deux divs côte à côte dans CSS en utilisant la disposition en grille.
Exemple
Ici, nous allons créer deux divs enfants à l'intérieur du div parent, avec les noms de classe comme ' parent ”, “ enfant ' et ' enfant ” :
< div classer = 'parent' >< div classer = 'enfant' >< / div >
< div classer = 'enfant' >< / div >
< / div >
Ensuite, dans la section CSS, utilisez ' .parent ' pour accéder à la div parent et définir la valeur de la propriété d'affichage sur ' la grille ”. Ensuite, réglez la fraction à l'aide de la touche ' grille-modèle-colonnes ” propriété pour créer de l'espace pour les colonnes. Dans notre cas, nous définirons des fractions comme ' 1fr ' et ' 1fr ”, ce qui signifie que les deux divs ont acquis un espace égal. De plus, nous allons définir l'écart entre deux colonnes à l'aide de la propriété column-gap et définir sa valeur sur ' 25px ”.
CSS :
.parent {affichage : la grille ;
grille-modèle-colonnes : 1fr 1fr ;
écart de colonne : 25px ;
}
Dans l'étape suivante, nous utilisons ' .enfant ' pour accéder à la fois à la div enfant et définir la hauteur des divs comme ' 250px ' et définissez la couleur d'arrière-plan sur ' RVB(253, 5, 109) ” :
.enfant {la taille : 250px ;
Contexte : RVB ( 253 , 5 , 109 ) ;
}
Cela affichera le résultat suivant :
Passons à une autre méthode pour placer div côte à côte
Méthode 2 : Placer deux divs côte à côte dans CSS à l'aide de flex
La ' fléchir ” est la valeur de la propriété display qui permet de placer deux div côte à côte. Cette propriété est utilisée pour définir une longueur flexible pour l'élément flexible. Il rétrécit ou agrandit l'élément flexible pour tenir dans son conteneur.
Syntaxe
La syntaxe de la propriété display avec flex est donnée ci-dessous :
affichage : flexible ;Passons à l'exemple pour comprendre le concept énoncé.
Exemple
Nous allons considérer le même fichier HTML et appliquer ' fléchir ” au conteneur parent. Ici, nous allons définir la valeur de la propriété display sur flex et définir l'écart entre les divs enfants sur ' 10 pixels ” :
.parent {affichage : fléchir ;
écart : 10 pixels ;
}
Après cela, définissez la largeur, la hauteur et la couleur d'arrière-plan de la div comme ' 650px ”, “ 200px ', et 'rgb(0, 255, 42) ', respectivement:
.enfant {largeur : 650px ;
la taille : 200px ;
Contexte : RVB ( 0 , 255 , 42 ) ;
}
Le résultat du code donné est donné ci-dessous:
Méthode 3 : Placer deux Divs côte à côte dans CSS à l'aide de float
La propriété CSS float spécifie la direction flottante d'un élément. Plus précisément, cette propriété peut être utilisée pour placer deux divs côte à côte en CSS.
Syntaxe
La syntaxe de la propriété float est :
flottant : aucun|gauche|droiteVoici la description des valeurs ci-dessus :
- rien: Il est utilisé pour restreindre le flottement.
- la gauche: Il est utilisé pour faire flotter des éléments sur le côté gauche.
- droit: Il est utilisé pour faire flotter des éléments sur le côté droit.
Passons à l'exemple de placer div côte à côte.
Exemple
Maintenant, nous allons créer deux divs à l'intérieur de la balise
et attribuer le nom de classe comme ' div1 ' et ' div2 ” : < corps >< div classer = 'div1' >< / div >
< div classer = 'div2' >< / div >
< / corps >
Ensuite, utilisez ' .div1 ' et ' .div2 ” pour accéder aux conteneurs ajoutés dans la section HTML. Nous utiliserons les deux divs dans la même classe car les propriétés et les valeurs que nous allons attribuer aux deux sont les mêmes.
Ensuite, nous attribuons la valeur de la propriété float à ' la gauche ' et définissez la largeur et la hauteur de la div comme ' cinquante% ' et ' 40% ”. Nous utilisons également la propriété box-sizing et définissons sa valeur comme ' border-box ”. De plus, définissez la couleur d'arrière-plan de la div sur ' RVB(7, 255, 222) ' et définissez les valeurs de la propriété border comme ' 3px ”, “ solide ', et ' RVB(255, 0, 255) ” :
.div1 , .div2 {flotteur : la gauche ;
largeur : cinquante% ;
la taille : 40% ;
dimensionnement de la boîte : border-box ;
Contexte : RVB ( sept , 255 , 222 ) ;
frontière : 3px solide RVB ( 255 , 0 , 255 ) ;
}
Noter: Vous pouvez placer deux divs côte à côte sans utiliser la propriété box-sizing et la propriété border en définissant les différentes couleurs d'arrière-plan des divs.
Une fois que vous implémentez le code ci-dessus, exécute le fichier HTML et voyez le résultat :
Noter: Pour créer un espace entre deux divs, créez d'abord un autre div, puis définissez la marge du div en conséquence.
Conclusion
Les divs peuvent être placés côte à côte en utilisant trois méthodes CSS différentes, qui sont les ' fléchir ' et ' la grille ” valeurs de la propriété d'affichage et le “ flotteur ' propriété. Chacune des méthodes fonctionne efficacement; cependant, vous pouvez utiliser n'importe lequel d'entre eux selon nos exigences. Dans ce guide, nous avons discuté de trois méthodes pour placer div côte à côte à l'aide de CSS et avons fourni des exemples connexes.