Maison  >  Article  >  interface Web  >  Comment aligner plusieurs blocs DIV horizontalement ?

Comment aligner plusieurs blocs DIV horizontalement ?

Linda Hamilton
Linda Hamiltonoriginal
2024-11-03 14:03:02945parcourir

How to Align Multiple DIV Blocks Horizontally?

Aligner plusieurs blocs DIV horizontalement

Placer plusieurs blocs DIV sur la même ligne horizontale est une tâche de mise en page courante dans le développement Web. Pour y parvenir, suivez les étapes décrites ci-dessous :

Définissez un Parent DIV avec text-align: center; pour aligner les éléments enfants horizontalement.

Dans le DIV parent, définissez les DIVs enfants pour afficher : inline ;. Cela leur permet de s'asseoir côte à côte sur la même ligne.

<code class="css">#block_container {
  text-align: center;
}

#bloc1,
#bloc2 {
  display: inline;
}</code>

Exemple de contenu :

<code class="html"><div id="block_container">
  <div id="bloc1"><?php echo " version " . $version . " Copyright &copy; All Rights Reserved."; ?></div>
  <div id="bloc2"><img src="..."></div>
</div></code>

Considérations supplémentaires :

  • Évitez de placer du contenu brut directement à l'intérieur des éléments DIV. Utilisez des balises appropriées telles que

    ou à la place.

  • Exemple :
    <p id="bloc1"><?php echo " version ".$version." Copyright &copy; Tous droits réservés."; ?></p>

Démo :
https://jsfiddle.net/

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn