Comment puis-je aligner horizontalement deux divisions sans utiliser de tableaux ?

Alignement horizontal des divs

Une tâche de mise en page courante consiste à aligner deux divs horizontalement, chacun contenant son propre titre et sa propre liste. Bien que les tableaux puissent facilement y parvenir, leur utilisation pour la mise en page n'est souvent pas souhaitable. Pour aligner les divs horizontalement sans recourir aux tableaux, envisagez l'approche suivante :

Flottant les divs dans un conteneur parent

Flottez les divs dans un conteneur parent. Flottant permet aux divs d'être positionnés les uns à côté des autres horizontalement. Assurez-vous que le conteneur parent est stylé comme suit :

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

• float: left : fait flotter les divs vers la gauche dans le parent.
• clear : none : permet aux divs de circuler à côté de les uns les autres sans effacer un line.

Exemple

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

Avec cette approche, les divs seront alignés horizontalement, chacun contenant son titre et sa liste, sans avoir besoin 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!