Comment afficher les Divs côte à côte sans imbrication ?

Réaliser un affichage côte à côte des divs

Lorsque vous traitez plusieurs éléments div qui doivent apparaître horizontalement adjacents, un défi commun se pose, surtout s'ils ne sont pas imbriqués les uns dans les autres. Dans de tels cas, les placer côte à côte peut être délicat.

Énoncé du problème :

Considérez la structure HTML suivante :

<code class="html"><div id='parent_div_1'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_2'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_3'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div></code>

Le but est d'avoir chaque paire d'éléments child_div_1 et child_div_2 affichés côte à côte.

Solution :

Pour y parvenir, le concept de "inline-block" entre en jeu. Par défaut, les éléments div sont des éléments de bloc, ce qui signifie qu'ils occupent toute la largeur disponible. Cependant, en définissant la propriété display sur inline-block, les divs peuvent être rendus en ligne sans perturber le flux des éléments tout en étant traités comme des éléments de bloc.

<code class="css">.child_div_1, .child_div_2 {
  display: inline-block;
}</code>

Avec cette modification, les divs enfants seront rendus en ligne. , occupant de l'espace sans s'étendre sur toute la largeur. Cela leur permet d'être affichés côte à côte dans leurs divs parents respectifs.

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!