Comment puis-je aligner les éléments DIV côte à côte à l'aide de HTML et CSS ?

Aligner

éléments côte à côte

Dans la quête pour aligner les éléments côte à côte avec HTML et CSS, l'approche la plus connue est float: left, mais ce n'est pas la seule méthode.< /p>

Voici différentes techniques pour réaliser un alignement côte à côte, allant de la plus largement utilisée à plus innovant.

---

Float

Utiliser float : gauche ou droite en est un méthode. Soyez toutefois prudent car cela peut impacter la disposition des autres éléments.

HTML

<div><br> <div> < div class="float-left">B</div><br></div><br>

CSS

.float-left {<br> float : gauche ;<br>}<br>

---

Affichage en ligne

affichage : inline-block permet de placer des éléments côte à côte sans affecter la disposition, bien qu'un espace puisse apparaître entre eux.

HTML

<div><br> <div> <div class="inline-block">B</div><br></div><br>

CSS

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

Pour éliminer l'espace entre les éléments du bloc en ligne, supprimez l'espace entre le code HTML tags.

---

Flexbox

Flexbox, grâce à ses puissantes capacités de mise en page, peut aligner facilement les éléments horizontalement.

HTML

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

CSS

.flex-parent {<br> display: flex;<br>}<br>.flex- enfant {<br>flex : 1;<br>}<br>

---

Flexbox en ligne

En ligne flexbox est utile pour placer des éléments côte à côte dans inline content.

HTML

<div> <div>A</div><br> <div>B</div> <br></div><br>

CSS

.inline-flex-parent {<br> display: inline-flex;<br>}<br>

---

CSS Grid

CSS Grid offre un contrôle précis sur le positionnement des éléments.

HTML

<div > <div>A</div><br> <div>B</div><br></div><br>

CSS

.grid-parent {<br> 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!