Dans HTML, les images sont utilisées à différentes fins et sont généralement affichées dans la forme verticale séparément. Cependant, parfois, vous devrez peut-être placer des images côte à côte pour créer une disposition élégante ou pour atteindre tout autre objectif de développement Web.

Dans cet article, nous discuterons de la façon de placer deux Divs côte à côte dans CSS en utilisant:

• flotter
• grille
• fléchir

Commençons!

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

Dans CSS, le «flotter»La propriété spécifie la direction flottante d'un élément. Il place un élément sur le côté droit ou gauche du conteneur, permettant aux éléments en ligne et en texte de s'enrouler autour.

Syntaxe

La syntaxe de la propriété Float est:

Float: Aucun | Gauche | Droite

Voici la description liée à la valeur susmentionnée de la propriété Float:

• aucun: Il est utilisé pour aucun flotteur.
• 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.

En utilisant le "flotter»Propriété, vous pouvez également placer des images côte à côte. Passons à l'exemple de la plate-forme des images côte à côte.

Exemple 1: Placer deux images côte à côte à l'aide de la propriété flottante

Ici, nous avons ajouté un titre en utilisant

et a créé deux divs, et lui a attribué les sources d'image.

Html

Placer les images côte à côte à l'aide de CSS Float

Dans CSS, nous utiliserons ".div«Pour accéder aux deux divs que nous avons créés dans le fichier html. Ensuite, attribuez la valeur de la propriété Float comme «gauche". En conséquence, l'effet sera appliqué à nos deux conteneurs.

CSS

.div
flottant: à gauche;

Comme vous pouvez le voir, nous avons réussi à placer des images côte à côte:

Exemple: placez deux images côte à côte avec l'espace

Si vous souhaitez créer de l'espace entre ces deux images et les placer côte à côte, utilisez le «utilisez le«largeur»Propriété et attribuez-y une valeur.

Ici, nous attribuerons la valeur de la propriété de largeur comme «300px»:

.div
flottant: à gauche;
Largeur: 300px;

Enregistrez le code donné et consultez les résultats:

Méthode 2: Placer les images côte à côte dans CSS en utilisant la grille

Pour placer deux ou plus de deux images côte à côte le «grille”La disposition est utilisée. 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 comme suit:

Affichage: grille;

Passons à l'exemple.

Exemple

Ici, nous créerons quatre sous-divs à l'intérieur des noms div principaux comme «parent"Et ajoutez-y des images à l'aide de la balise.

Html

Placer les images côte à côte à l'aide de la grille CSS

Ensuite, dans la section CSS, nous utiliserons le «.parent«Pour accéder au parent div et définir la valeur de la propriété d'affichage comme«grille". Après cela, nous allons définir la fraction en utilisant le «colonne de la grille»Propriété pour créer un espace pour les colonnes. En précisant "1FR"Trois fois créeront"trois”Colonnes, ce qui signifie que tous les divs ont un espace égal. De plus, nous allons définir l'écart entre les colonnes à l'aide de la propriété de colonne et définir sa valeur comme «5px»:

.parent
Affichage: grille;
Grid-Template-colonnes: 1fr 1fr 1fr;
Colonne-Gap: 5px;

Une fois que vous avez terminé le code CSS, exécutez le fichier HTML et vérifiez la sortie:

Méthode 3: Placez deux images 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 des éléments côte à côte. Dans un tel scénario, les éléments seront définis en fonction de la fenêtre de l'écran d'affichage.

Syntaxe

La syntaxe de la propriété d'affichage avec Flex est:

Affichage: flex;

Passons à l'exemple:

Exemple

Nous considérerons le fichier HTML précédent et ajouterons trois sous-divs à l'intérieur de la div principale et lui spécifierons différentes sources d'images:

Placer les images côte à côte à l'aide de CSS Flex

Dans CSS, définissez la valeur de la propriété d'affichage comme «fléchir»Et définissez la colonne comme«5px»:

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

Cela donnera le résultat suivant:

Nous avons fourni trois moyens simples pour placer des images côte à côte dans HTML et CSS.

Conclusion

Les images sont placées 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é. CSS vous permet également de placer l'espace ou l'espace entre ces images adjacentes. Dans ce guide, nous avons discuté de ces trois méthodes en détail et fourni des exemples de chaque méthode pour placer des images côte à côte en utilisant CSS.