Come allineare due div orizzontalmente?

Ho bisogno di allineare due div uno accanto all'altro, in modo che ciascuno contiene un titolo e un elenco di elementi, simile a:Come allineare due div orizzontalmente?

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

E 'straordinariamente facile da fare con le tabelle, ma io non voglio usa le tabelle. Come posso raggiungere questo obiettivo?

fonte

2010-03-10 DaveDev

Float div in un contenitore padre, e lo stile in questo modo:

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

fonte

2010-03-10 13:24:30 Robusto

Se si dà un elemento un galleggiante, è ridondante al meglio per dare anche un 'chiaro: none'. –

Questo è stato risolto quando alcuni browser meno recenti non hanno sempre applicato il comando 'clear: none' con float. – Robusto

entrambi avvolgerli in un contenitore in questo modo:

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

fonte

2010-03-10 13:26:15 Brant

Il contenitore stesso non deve essere flottato. –

È necessario float the divs nella direzione richiesta, ad esempio left o right.

fonte

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>

fonte

2010-03-10 13:27:46

Un id può essere utilizzato solo una volta. –

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

sereno deve essere utilizzato in modo da impedire l'insetto galleggiante (altezza deformazione di Div esterno).

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

fonte

2010-03-10 13:27:58 coderex

Cosa fa il div annidato finale? Perché 'chiaro: entrambi? perché 'font-size: 1px'? – Cheeso

Per cancellare i galleggianti. Credo che "font-size: 1px" sia una cosa compatibile con IE. Potrei sbagliarmi. –

aggiungere una classe a ciascuno dei div:

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

Questa è una soluzione di percentuali generica - con larghezze pixel-based è di solito molto più affidabile. Probabilmente vorrai cambiare anche le varie dimensioni di margine/riempimento.

Opzionalmente si può anche avvolgere il codice HTML in un div contenitore e utilizzare questo CSS:

.container { 
    overflow: hidden; 
}

Questo assicurerà contenuto successivo non avvolgere intorno agli elementi mobili.

fonte

2010-03-10 15:16:00 DisgruntledGoat

-1

per il vostro scopo, io preferisco usare la posizione, invece di galleggiare:

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

Utilizzare un genitore con posizione relativa:

position: relative;

E i bambini in posizione assoluta:

position: absolute;

In bonus, è possibile guidare meglio il dimen sioni dei tuoi componenti.

fonte

2015-05-27 12:38:58

se si dispone di due div, è possibile utilizzare questo per allineare div uno accanto all'altro nella stessa riga:

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

fonte

2015-08-28 20:51:15

Al giorno d'oggi, potremmo usare un po 'di flexbox per allineare quelli div.

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

fonte

2016-07-19 22:10:44

Grazie, non sapevo di 'display: flex'. Aggiunto il link in modo che le persone possano facilmente vedere lo sfondo CSS3. – akauppi

Come allineare due div orizzontalmente?

risposta

Problemi correlati