Comment puis-je aligner horizontalement des divisions en HTML sans utiliser de tableaux ?

Alignement horizontal des divisions sans tableaux

En HTML, il existe différentes manières d'aligner les éléments. Bien qu'il soit simple d'aligner des divs à l'aide de tableaux, certains préfèrent une approche non tabulaire. Voici comment réaliser un alignement horizontal des div sans compter sur les tableaux :

Utiliser CSS Float et Clear

1. Créez un div parent : Enveloppez les deux div que vous souhaitez aligner dans un div parent.
2. Flottez les divs : Ajoutez le flotteur : gauche ; propriété aux divs enfants. Cela les fera flotter sur le côté gauche de leur parent.
3. Effacer le flotteur : Pour empêcher les divs enfants de s'empiler verticalement, ajoutez le clear: none; propriété à la division parent. Cela empêchera les éléments de s'enrouler autour des divs flottants.

Exemple de code

.aParent div {
    float: left;
    clear: none; 
}

<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>

En suivant ces étapes, vous pouvez aligner deux divs horizontalement et éviter d'avoir à recourir aux mises en page tabulaires dans vos pages Web.

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!