Comment puis-je aligner deux div horizontalement?

J'ai besoin d'aligner deux divs à côté de l'autre, de sorte que chacun contient un titre et une liste d'éléments, similaires à:Comment puis-je aligner deux div horizontalement?

<div> 
    <span>source list</span> 
    <select size="10"> 
     <option /> 
     <option /> 
     <option /> 
    </select> 
</div> 

<div> 
    <span>destination list</span> 
    <select size="10"> 
     <option /> 
     <option /> 
     <option /> 
    </select> 
</div>

Il est remarquablement facile à faire avec des tables, mais je ne veux pas utiliser des tables. Comment puis-je atteindre cet objectif?

Source

2010-03-10 DaveDev

Float les divs dans un conteneur parent, et le style comme ceci:

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

<div class="aParent"> 
 
    <div> 
 
     <span>source list</span> 
 
     <select size="10"> 
 
      <option /> 
 
      <option /> 
 
      <option /> 
 
     </select> 
 
    </div> 
 
    <div> 
 
     <span>destination list</span> 
 
     <select size="10"> 
 
      <option /> 
 
      <option /> 
 
      <option /> 
 
     </select> 
 
    </div> 
 
</div>

Source

2010-03-10 13:24:30 Robusto

Si vous donnez un élément un flotteur, il est redondant au mieux de donner aussi un 'clair: none'. –

Cette réponse a été obtenue lorsque certains navigateurs plus anciens n'appliquaient pas toujours le paramètre clear: none avec des valeurs flottantes. – Robusto

les envelopper à la fois dans un récipient comme ceci:

.container{ 
 
    float:left; 
 
    width:100%; 
 
} 
 
.container div{ 
 
    float:left; 
 
}

<div class='container'> 
 
    <div> 
 
     <span>source list</span> 
 
     <select size="10"> 
 
      <option /> 
 
      <option /> 
 
      <option /> 
 
     </select> 
 
    </div> 
 
    <div> 
 
     <span>destination list</span> 
 
     <select size="10"> 
 
      <option /> 
 
      <option /> 
 
      <option /> 
 
     </select> 
 
    </div> 
 
</div>

Source

2010-03-10 13:26:15 Brant

Le conteneur lui-même ne doit pas être flotté. –

Vous devez float the divs dans la direction requise par exemple left ou right.

Source

2010-03-10 13:26:27 Sarfraz

-1

<html> 
<head> 
<style type="text/css"> 
#floatingDivs{float:left;} 
</style> 
</head> 

<body> 
<div id="floatingDivs"> 
    <span>source list</span> 
    <select size="10"> 
     <option /> 
     <option /> 
     <option /> 
    </select> 
</div> 

<div id="floatingDivs"> 
    <span>destination list</span> 
    <select size="10"> 
     <option /> 
     <option /> 
     <option /> 
    </select> 
</div> 

</body> 
</html>

Source

2010-03-10 13:27:46

Un identifiant ne peut être utilisé qu'une seule fois. –

<div> 
<div style="float:left;width:45%;" > 
    <span>source list</span> 
    <select size="10"> 
     <option /> 
     <option /> 
     <option /> 
    </select> 
</div> 

<div style="float:right;width:45%;"> 
    <span>destination list</span> 
    <select size="10"> 
     <option /> 
     <option /> 
     <option /> 
    </select> 
</div> 
<div style="clear:both; font-size:1px;"></div> 
</div>

Effacer doit être utilisé de manière à éviter le bug du flotteur (gauchissement de la hauteur de la division extérieure).

style="clear:both; font-size:1px;

Source

2010-03-10 13:27:58 coderex

Que fait le div imbriqué final? Pourquoi 'clair: les deux'? pourquoi 'font-size: 1px'? – Cheeso

Pour effacer les flottants. Je crois que le "font-size: 1px" est une chose de compatibilité IE. Je peux me tromper. –

Ajouter une classe à chacun des divs:

.source, .destination { 
 
    float: left; 
 
    width: 48%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.source { 
 
    margin-right: 4%; 
 
}

<div class="source"> 
 
    <span>source list</span> 
 
    <select size="10"> 
 
     <option /> 
 
     <option /> 
 
     <option /> 
 
    </select> 
 
</div> 
 
<div class="destination"> 
 
    <span>destination list</span> 
 
    <select size="10"> 
 
     <option /> 
 
     <option /> 
 
     <option /> 
 
    </select> 
 
</div>

C'est une solution de pourcentage générique - en utilisant des largeurs à base de pixels est généralement beaucoup plus fiable. Vous voudrez probablement changer les différentes tailles de marge/remplissage.

Vous pouvez également en option envelopper le HTML dans un conteneur div et utiliser ce CSS:

.container { 
    overflow: hidden; 
}

Cela permettra d'assurer le contenu ultérieur ne bouclent pas les éléments flottants.

Source

2010-03-10 15:16:00 DisgruntledGoat

-1

Pour votre but, je préfère utiliser la position au lieu de flotter:

http://jsfiddle.net/aas7w0tw/1/

Utilisez un parent avec la position relative:

position: relative;

Et les enfants en position absolue:

position: absolute;

En prime, vous pouvez mieux conduire la dimension sions de vos composants.

Source

2015-05-27 12:38:58

si vous avez deux divs, vous pouvez l'utiliser pour aligner les divs à côté de l'autre dans la même ligne:

#keyword { 
 
    float:left; 
 
    margin-left:250px; 
 
    position:absolute; 
 
} 
 

 
#bar { 
 
    text-align:center; 
 
}

<div id="keyword"> 
 
Keywords: 
 
</div> 
 
<div id="bar"> 
 
    <input type = textbox name ="keywords" value="" onSubmit="search()" maxlength=40> 
 
    <input type = button name="go" Value="Go ahead and find" onClick="search()"> 
 
</div>

Source

2015-08-28 20:51:15

De nos jours, nous pourrions utiliser certains flexbox pour aligner les divs

.container { 
 
    display: flex; 
 
}

<div class="container"> 
 
    <div> 
 
     <span>source list</span> 
 
     <select size="10"> 
 
      <option /> 
 
      <option /> 
 
      <option /> 
 
     </select> 
 
    </div> 
 

 
    <div> 
 
     <span>destination list</span> 
 
     <select size="10"> 
 
      <option /> 
 
      <option /> 
 
      <option /> 
 
     </select> 
 
    </div> 
 
</div>

Source

2016-07-19 22:10:44

Merci, ne savait pas de 'display: flex'. Ajout du lien afin que les gens puissent facilement voir l'arrière-plan CSS3. – akauppi

Comment puis-je aligner deux div horizontalement?

Répondre

Questions connexes