Comment aligner les divisions enfants côte à côte dans des divisions parents distinctes à l'aide d'Inline-Block ?

Comment aligner les divisions enfants côte à côte dans les divisions parentales non imbriquées

Vous avez deux divisions côte à côte, chacune dans leur propre division parent. Ces divs parents sont répétés plusieurs fois. Vous souhaitez positionner chaque paire de child_div_1 et child_div_2 horizontalement l'un à côté de l'autre.

Pour y parvenir, utilisez le display:inline-block; propriété de style sur les divs enfants. Cette propriété permet aux div de s'aligner en tant qu'éléments en ligne sans interrompre le flux normal du contenu. Même si les div s'afficheront les uns à côté des autres, ils conserveront leur statut d'éléments de bloc.

Cette méthode offre un moyen plus simple d'obtenir la disposition souhaitée par rapport à l'utilisation de flotteurs. Voici un exemple de HTML et CSS modifiés :

<code class="html"><div id='parent_div_1'>
  <div class='child_div_1' style="display:inline-block;"></div>
  <div class='child_div_2' style="display:inline-block;"></div>
</div></code>

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

Pour plus de conseils, vous pouvez vous référer au tutoriel suivant : http://learnlayout.com/inline-block.html

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!