Comment aligner les éléments Div côte à côte en HTML et CSS ?

Aligner

éléments côte à côte

Beaucoup de façons de le faire, attention float : left…

Il existe de nombreuses façons d'aligner éléments côte à côte. Vous trouverez ci-dessous les méthodes les plus courantes pour réaliser deux éléments côte à côte…

Démo : affichez/modifiez tous les exemples ci-dessous sur Codepen

---

Styles de base pour tous les exemples ci-dessous…

Quelques styles CSS de base pour les éléments parents et enfants dans ces exemples :

.parent {<br> fond : violet moyen ;<br> remplissage : 1rem;<br>}<br>.child {<br> bordure : 1px indigo uni ;<br> rembourrage : 1rem;<br>}<br>

---

Utiliser float : gauche avec attention

L'utilisation de la solution flottante peut avoir des effets inattendus sur d'autres éléments. (Indice : vous devrez peut-être utiliser un clearfix.)

html

<div> <div class ='enfant float-left-child'>A</div><br> <div></div><br>

css

 float : gauche;<br>}<br>

---

Utilisation de l'affichage : le bloc en ligne est simple

html

<div> <div class='child inline-block-child'>A&lt ;/div><br> <div></div><br>

css

 affichage : inline-block;<br>}<br>

---

display : inline-block et suppression de l'espace entre divs

Remarque : l'espace entre ces deux éléments enfants peut être supprimé, en supprimant l'espace entre les balises div :

html

<div> <div class='child inline-block-child'>A&lt ;/div><div class='enfant inline-block-child'>B</div><br></div><br>

css

 affichage : inline-block;<br>}<br>

---

display : flex est un bon choix

html

<div> <div class='child flex-child'>A</ div><br> <div></div><br>

css

 affichage : flex;<br>}<br>.flex-child { <br>flex : 1;<br>}<br>

---

display : inline-flex est similaire à display : flex mais en ligne

html

<div> <div class='child'>A</div><br> <div></div><br>

css

 affichage : inline-flex;<br>}<br>

---

Avec affichage : grille, vous pouvez affiner le mise en page

html

<div> <div class='child'>A</div><br> <div></div><br>

css

 affichage : grille ;<br> grille -modèle-colonnes : 1fr 1fr<br>}<br>

---

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!