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><p></p>
<p>css</p>
<p></p>
<pre class="brush:php;toolbar:false"> 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><p></p>
<p>css</p>
<p></p>
<pre class="brush:php;toolbar:false"> 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><p></p>
<p>css</p>
<p> </p>
<pre class="brush:php;toolbar:false"> affichage : inline-block;<br>}<br>

---

display : flex est un bon choix

html

<div> <div class="child flex-child">A div><br> <div></div>
<br><p></p>
<p>css</p>
<p></p>
<pre class="brush:php;toolbar:false"> 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><p></p>
<p>css</p>
<p></p>
<pre class="brush:php;toolbar:false"> 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><p></p>
<p>css</p>
<p></p>
<pre class="brush:php;toolbar:false"> affichage : grille ;<br> grille -modèle-colonnes : 1fr 1fr<br>}<br>

---