Les graphiques et les images rendent les pages Web plus conviviales. De plus, les images attirent l'attention de l'utilisateur et aident à styliser ou à concevoir l'application. L'application ayant plus d'images obtient plus de vues. De plus, il existe plusieurs façons d'ajuster les positions de l'image dans CSS, comme l'utilisation de flexbox, de grille, de propriétés de flotteur et bien d'autres.

L'écriture discutera des différentes méthodes pour avoir des images et du texte côte à côte dans HTML.

Préalable: créer un fichier html

Avant de passer au sujet principal de l'article, suivez les instructions ci-dessous pour créer un fichier HTML:

• Ajouter un ""Élément et nommez sa classe"détraitement des linux".
• Ajoutez deux «» éléments enfants dans le principal «» pour l'image et le texte respectivement. Attribuez le «"Tag une classe"Linux-IMG" et le "

  "Tag avec la classe"texte".

• Ajustez la taille de la police "

  ”Tag en utilisant le"taille de police" propriété.

• Incluez du texte dans le «

  " étiqueter.

Html

Linuxhint

Vidéos de qualité, meilleurs articles

Méthode 1: Comment avoir l'image et le texte côte à côte à l'aide de la propriété «float»?

Le CSS "flotter«La propriété est utilisée pour déterminer la position de l'élément, qu'elle soit flottée à gauche ou à droite ou aucune. Un élément flotté sera entouré des éléments à côté.

Style «Linux-Details» Classe

Pour ce faire, d'abord, coiffer le «détraitement des linux«Classe en attribuant les propriétés suivantes:

.Linux-Details
Largeur: 80%;
rembourrage: 1%;

Le ".détraitement des linux»Est utilisé pour accéder au conteneur créé. Cette classe est ensuite appliquée avec les propriétés sous-expliquées:

• "largeur»Détermine la largeur de l'élément.
• "rembourrage"Attribution d'espace autour du contenu de l'élément.

Classe de style «Linux-IMG»

Le CSS "flotter"Une propriété est ajoutée dans le"Linux-IMG”Classe pour ajuster la position de l'image:

.Linux-IMG
hauteur: 150px;
Largeur: 150px;
marge-gauche: 30%;
flottant: à gauche;

Ici:

• "hauteur"Ajuste la hauteur de l'élément.
• "marge-gauche”Ajoute de l'espace sur le côté gauche de l'élément.
• "flotter«Propriété avec la valeur»gauche”Jette l'image à gauche. En conséquence, le contenu texte à côté sera placé après.

Sortir

Méthode 2: Comment avoir une image et du texte côte à côte à l'aide de la propriété «Grid»?

Le CSS "grille»La propriété offre un moyen plus simple de concevoir une disposition de site Web fournissant des lignes et des colonnes.

Style «Linux-Details» Classe

Maintenant le "grille«La propriété est placée dans le«détraitement des linux" classe:

.Linux-Details
Affichage: grille;
Align-Items: Centre;
grille-template-colonnes: 1fr 1fr;
Colonne-Gap: 5px;

Le "détraitement des linux«La classe se voit attribuer les propriétés suivantes:

• "afficher»Propriété avec la valeur attribuée comme«grille»Fournit une disposition contenant des lignes et des colonnes.
• "align-items"Avec la valeur"centre”Placé est utilisé pour placer l'élément au centre.
• "colonne de la grille«Propriété avec la valeur»1FR 1FR»Fournit deux colonnes d'une fraction chacune.
• "chanqueur»La propriété ajoute de l'espace entre les colonnes.

Élément de style «IMG»

img
largeur maximale: 100%;
max-height: 100%;

Le "»L'élément est fourni les propriétés mentionnées ci-dessous:

• "largeur maximale»La propriété détermine la largeur maximale de l'élément.
• "hauteur maximum»Définit la hauteur maximale de l'élément.

Sortir

Méthode 3: Comment avoir l'image et le texte côte à côte à l'aide de la propriété «flex»?

Le CSS "fléchir»La propriété place les éléments d'affilée (par défaut).

Style «Linux-Details» Classe

.Linux-Details
Affichage: flex;
Align-Items: Centre;
Justification-contenu: centre;
rembourrage: 5%;

Voici l'explication des propriétés mentionnées ci-dessus:

• "afficher«Propriété avec la valeur»fléchir«Placera le«"Le contenu de l'élément d'affilée.
• "align-items»Aligne les éléments flexibles verticalement.
• "justifier”Définit l'alignement de l'élément flexible horizontalement.

Classe de style «texte»

.texte
taille de police: 20px;
Padding-Left: 20px;

Le "texte«La classe est conçue en utilisant les propriétés suivantes:

• "taille de police»La propriété définit la taille de la police.
• "rembourrage à gauche»Ajoute de l'espace à gauche du texte.

Sortir

Il s'agissait d'avoir une image et du texte côte à côte en utilisant différentes propriétés.

Conclusion

Plusieurs propriétés peuvent être utilisées pour placer une image et un texte côte à côte sur un site Web. Les propriétés les plus couramment utilisées sont «flotter","grille", et "fléchir". Pour ce faire, créez un «" récipient. Ajoutez deux autres éléments «» pour l'image et le texte. Ensuite, appliquez l'une des propriétés mentionnées à la balise «» principale pour les ajustements de position d'image et de texte. Ce blog a expliqué diverses propriétés pour placer une image et un texte côte à côte.