3 façons faciles de placer deux divs côte à côte dans CSS

Les divs sont principalement utilisés pour créer différentes sections en HTML, qui peuvent être stylisées en conséquence à l'aide du CSS. Parfois, vous devrez peut-être placer deux divs côte à côte pour créer une disposition élégante. À cette fin, CSS fournit diverses méthodes telles que:

• En utilisant "grille"
• En utilisant "fléchir"
• En utilisant "flotter"

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: Placez deux divs côte à côte dans CSS à l'aide de la grille

Le CSS "grille”La disposition permet à l'utilisateur de placer deux ou plus deux divs côte à côte. Fondamentalement, la grille est une valeur de la propriété d'affichage utilisée pour créer une disposition composée de lignes et de colonnes.

Syntaxe

La syntaxe de la propriété d'affichage avec disposition de la grille est donnée ci-dessous:

Affichage: grille

Maintenant, vérifions un exemple lié à la mise en place de deux divs côte à côte dans CSS en utilisant la disposition de la grille.

Exemple

Ici, nous créerons deux divs enfants à l'intérieur du parent div, ayant les noms de classe comme «parent","enfant" et "enfant»:

Ensuite dans la section CSS, utilisez ".parent«Pour accéder au parent div et définir la valeur de la propriété d'affichage comme«grille". Ensuite, définissez la fraction à l'aide du «colonne de la grille»Propriété pour créer un 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é de colonne et définir sa valeur comme «25px".

CSS:

.parent
Affichage: grille;
grille-template-colonnes: 1fr 1fr;
Colonne-Gap: 25px;

À l'étape suivante, nous utilisons ".enfant«Pour accéder à la fois à l'enfant div et définir la hauteur des divs comme«250px»Et définissez la couleur d'arrière-plan comme«RVB (253, 5, 109)»:

.enfant
hauteur: 250px;
Contexte: RVB (253, 5, 109);

Cela montrera le résultat suivant:

Passons à une autre méthode pour placer la div côte à côte

Méthode 2: Placez deux divs côte à côte dans CSS en utilisant Flex

Le "fléchir"Est la valeur de la propriété d'affichage qui permet de placer deux divs 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 pousse l'élément flexible pour s'adapter à son récipient.

Syntaxe

La syntaxe de la propriété d'affichage avec Flex est donnée ci-dessous:

Affichage: flex;

Passons à l'exemple pour comprendre le concept déclaré.

Exemple

Nous considérerons le même fichier HTML et postulerons "fléchir”Au conteneur parent. Ici, nous définirons la valeur de la propriété d'affichage en tant que flex et définirons l'écart entre les enfants divs comme «10px»:

.parent
Affichage: flex;
Écart: 10px;

Après cela, définissez la largeur, la hauteur et la couleur d'arrière-plan de la div comme «650px","200px", et «RVB (0, 255, 42)", respectivement:

.enfant
Largeur: 650px;
hauteur: 200px;
Contexte: RVB (0, 255, 42);

Le résultat du code donné est donné ci-dessous:

Méthode 3: Placez deux divs côte à côte dans CSS en utilisant Float

La propriété float CSS 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 dans CSS.

Syntaxe

La syntaxe de la propriété Float est:

Float: Aucun | Gauche | Droite

Voici la description des valeurs ci-dessus:

• aucun: Il est utilisé pour restreindre les flottants.
• gauche: Il est utilisé pour flotter des éléments sur le côté gauche.
• droite: Il est utilisé pour 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»:

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 parce que les propriétés et les valeurs que nous allons attribuer sont les mêmes.

Ensuite, nous attribuons la valeur de la propriété Float comme «gauche»Et définissez la largeur et la hauteur de la div comme«50%" et "40%". Nous utilisons également la propriété de dimensionnement en boîte et définissons sa valeur comme «borne". De plus, définissez la couleur d'arrière-plan de la div comme «RVB (7, 255, 222)»Et définissez les valeurs de la propriété frontalière comme«3px","solide", et "RVB (255, 0, 255)»:

.div1, .div2
flottant: à gauche;
Largeur: 50%;
hauteur: 40%;
Dimensionnement en boîte: Border-Box;
Contexte: RVB (7, 255, 222);
Border: 3px RVB solide (255, 0, 255);

Note: Vous pouvez placer deux divs côte à côte sans utiliser la propriété de la taille d'une boîte et la propriété de bordure en définissant les différentes couleurs d'arrière-plan des divs.

Une fois que vous avez implémenté le code ci-dessus, exécute le fichier html et voir le résultat:

Note: Pour créer un écart entre deux divs, créez d'abord une autre div, puis définissez la marge du div en conséquence.

Conclusion

Les DIV peuvent être placés côte à côte en utilisant trois méthodes différentes de CSS, qui sont les «fléchir" et "grille«Valeurs de la propriété d'affichage et«flotter" propriété. Chacune des méthodes fonctionne efficacement; Cependant, vous pouvez utiliser l'un d'eux en fonction de nos exigences. Dans ce guide, nous avons discuté de trois méthodes pour placer DIV côte à côte à l'aide de CSS et fourni des exemples connexes.