CSS deux divs côte à côte
Méthodes pour placer deux divs côte à côte
Il existe cinq méthodes différentes disponibles dans CSS pour placer les deux Divs côte à côte:
- Affichage: méthode de blocage en ligne
- Affichage: méthode de la table
- Méthode Float CSS
- Méthode CSS Flexbox
- Méthode de la grille CSS
Exemple n ° 1: Utilisation de l'affichage: méthode de blocage en ligne
Nous commençons notre code HTML en ouvrant un nouveau fichier dans le code Visual Studio, puis en sélectionnant la langue HTML. Le fichier est créé ici. Nous avons mis le «!»Marquez pour obtenir les balises de base. Ainsi, lorsque nous appuyons sur «Entrée», toutes les balises de base de HTML apparaîtront sur le fichier.
Nous commençons notre codage à partir de la partie du corps. Nous plaçons un titre et deux divs différents ici. Nous plaçons ces deux divs côte à côte en utilisant la propriété «Affichage: bloc en ligne» dans CSS. Dans ce fichier HTML, nous lions également le fichier CSS avant le corps et à l'intérieur de la «tête». Maintenant, passez au fichier CSS et regardez comment nous utilisons cette propriété pour placer ces deux divs côte à côte.
Ici, après avoir mentionné le nom de la div, nous ouvrons les accolades bouclées. À l'intérieur de ces accolades bouclées, nous utilisons la propriété «Affichage» de CSS. Nous devons placer le «bloc en ligne» comme valeur de cette propriété «affichage». Cette propriété «Affichage: Block en ligne» nous aide à placer deux divs, l'un après l'autre. Cette propriété «Affichage: Block en ligne» ne fournit pas la «hauteur» et la «largeur», nous devons donc mentionner les propriétés distinctes pour régler la «hauteur» et la «largeur». Nous définissons la largeur des deux divs en utilisant la propriété «largeur» et la définissons sur «150px». Nous avons réglé la hauteur des deux divs sur «100px». Le «fond» de ces deux divs est «rose». La «bordure» que nous créons ici pour les deux divs est «2px» en largeur, en couleur «violet» et en «solide». Alors que nous écrivons du texte à l'intérieur de ces divs, nous définissons le texte au «centre» de la div à l'aide de la propriété «Text-Align». Nous avons également défini la «taille de police» sur «24px» et la «Font-Family» à «Algerien».
Dans la sortie, les deux divs sont placés côte à côte parce que nous avons utilisé la méthode «affichage: bloc en ligne» sur ces div. Les deux divs sont rendus ici l'un après l'autre.
Exemple # 2: Utilisation de la méthode d'affichage: table
Dans cet exemple, nous avons une rubrique, et nous créons deux divs avec le nom «Table-cellule» à l'intérieur des divs principaux qui sont les divs «conteneur» et «Row». Nous utilisons la propriété Affichage: Table dans CSS pour rendre les deux divs côte à côte.
Nous commençons par le style de la tête. Le «style de police» que nous utilisons ici pour le titre est «italique». La «couleur» que nous utilisons ici pour le titre est «marron». Et la «famille de police» que nous utilisons est «algérien». Ensuite, nous avons la classe «conteneur» de div. Nous utilisons ici la propriété «Affichage: Table», donc il affichera les deux divs côte à côte. Nous définissons la «largeur» sur «40%». Ensuite, pour la «rangée de table», nous utilisons à nouveau la propriété «Affichage», mais ici, nous mettons la «rangée de table» car sa valeur et sa «hauteur» sont définies sur «130px».
Ensuite, nous passons à la div «cellule de table» et avons établi certaines propriétés ici pour ces deux div. Nous créons une frontière pour les deux divs en utilisant la propriété «frontière». Cette bordure est définie sur «2px» pour sa largeur, «solide» pour son type et «marron» pour sa couleur. Après cela, nous avons réglé son «fond» pour rendre ces divs attrayants et utiliser une couleur «saumon clair» pour cette propriété. Nous définissons également «l'affichage» ici comme la «table-cellule». Le «rembourrage» que nous utilisons ici est «2px». De plus, nous avons du texte dans les divs. Nous appliquons un style au texte ici. La «famille de police» du texte est «algérien» et leur «taille de police» est «25px». Nous alignons ces textes sur le «centre».
Alors que nous appliquons la méthode «Affichage: table» sur ces divs, ils apparaissent côte à côte dans la sortie. Les deux divs sont rendus l'un à côté de l'autre.
Exemple # 3: Utilisation de la méthode Float
Ici, après la rubrique, nous avons une div principale nommée «conteneur» et nous avons mis les deux div différentes à l'intérieur de cette div. Nous créons une div avec le nom «ST-Box» et l'autre div nommé «Nd-Box». Nous mettons également les paragraphes à l'intérieur de chaque div sauf la div principale. Nous utiliserons la propriété float CSS pour régler les deux divs côte à côte.
Nous définissons la «largeur» et la «hauteur» du «conteneur» div en plaçant les valeurs «400px» et «190px», respectivement. La «couleur d'arrière-plan» du conteneur est «verte». Le «padding-top» est «20px» et le «padding-left» et «padding-droite» sont tous deux définis sur «15px» chacun. Maintenant, nous définissons la div «ST-Box» et utilisons la propriété «flottante». Ici, nous l'avons mis sur «gauche».
La «largeur» et la «hauteur» sont «180px» et «160px», respectivement. La «couleur fond» de cette div «st-box» est «blanche» avec une bordure de couleur «noir» en type «solide». La «taille de police» du paragraphe que nous avons écrit dans cette div est «18px». Les propriétés de div «nd-box» sont les mêmes que la div «st-box» que nous avons déjà expliquée ici. La seule nouvelle propriété que nous ajoutons ici est la propriété «marge-gauche» et nous la définissons sur «20px». Nous stylissons également un peu le cap en changeant sa «couleur» en «vert». Le «Times New Roman» est sélectionné ici comme «Font-Family».
Vous pouvez voir dans cette capture d'écran que les deux divs apparaissent ici côte à côte à l'intérieur de la div principale. Nous avons utilisé la propriété «flottante» dans cet exemple pour placer les deux divs l'une après l'autre.
Exemple n ° 4: Utilisation de la méthode Flexbox
Nous avons une div principale appelée «flex-container» qui contient deux divs distincts. À l'exception de la div principale, nous avons inséré certains paragraphes à l'intérieur de chaque div. Les deux divs seront placés côte à côte en utilisant la méthode CSS Flexbox dans cet exemple.
Nous alignons la rubrique dans le «centre» et fixons la «famille de police» à «Algérien». Nous mentionnons le «flex-container» et mettons la propriété «Display: Flex» à l'intérieur. Nous mettons cette propriété dans le conteneur afin que la propriété «flex» place l'élément enfant dans un contexte flexible et aligne les divs les uns à côté des autres. Pour le «Flex-Child», nous mettons «Flex» et donnons «1» comme valeur. Nous créons la bordure autour de chaque div en utilisant la propriété «bordure» et en la fixant sur un type solide «rouge». Nous définissons la «taille de police» du paragraphe qui est écrite à l'intérieur des divs à «20px». La «marge-droite» du «Flex-Child: First-Child» est définie ici sur «20px».
Ces divs apparaissent côte à côte dans la sortie parce que nous avons utilisé la propriété «Flexbox» dans cet exemple. Les deux divs sont représentés côte à côte.
Conclusion
Nous avons créé ce guide pour vous aider à comprendre les propriétés CSS qui aide à mettre deux divs côte à côte. Ce guide a suivi ce sujet en profondeur. Nous avons parcouru les méthodes qui sont utilisées pour placer deux divs côte à côte dans CSS. Nous avons expliqué qu'il y a cinq propriétés pour placer deux divs côte à côte. Nous avons parcouru quatre instances différentes dans lesquelles nous avons utilisé les quatre propriétés du CSS pour régler les deux divs côte à côte et avons fourni les sorties afin que vous puissiez voir comment ces propriétés fonctionnent. J'espère que vous pourrez déterminer quelles propriétés CSS sont utilisées pour placer les DIV côte à côte dans CSS et comment les utiliser par vous-même.