Maison >interface Web >tutoriel CSS >Comment aligner horizontalement des divisions sans utiliser de tableaux ?

Comment aligner horizontalement des divisions sans utiliser de tableaux ?

Barbara Streisand
Barbara Streisandoriginal
2024-11-21 00:11:14315parcourir

How to Horizontally Align Divs Without Using Tables?

Alignement horizontal des divs

Pour aligner deux divs horizontalement sans utiliser de tableaux, faites-les flotter dans un conteneur parent. Voici une explication détaillée de la façon d'y parvenir :

  1. Flotter les Divs :

    • Ajoutez la propriété CSS suivante à les divs :

      float: left;
  2. Effacer les flotteurs :

    • Pour empêcher les divs de En réduisant les éléments indésirables dans le parent, ajoutez la propriété suivante à un élément parent :

      clear: none;
  3. Exemple HTML et CSS :

    • Voici un exemple de ce à quoi pourraient ressembler vos HTML et CSS :

      <div class="aParent">
        <div>
            <span>source list</span>
            <select size="10">
                <option></option>
                <option></option>
                <option></option>
            </select>
        </div>
        <div>
            <span>destination list</span>
            <select size="10">
                <option></option>
                <option></option>
                <option></option>
            </select>
        </div>
      </div>
      .aParent div {
        float: left;
        clear: none; 
      }

Cette méthode est une moyen propre et simple d'aligner les divs horizontalement sans utiliser de tableaux.

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