Come mettere questi due div fianco a fianco?

110

Ho due div che non sono annidati, uno sotto l'altro. Sono entrambi all'interno di un div genitore e questo div genitore si ripete. Quindi essenzialmente:

<div id='parent_div_1'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_2'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_3'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

Voglio avere ogni paio di child_div_1e uno child_div_2accanto all'altro. Come posso fare questo?

css layout html

— Justin Meltzer
fonte

82

#parent_div_1, #parent_div_2, #parent_div_3 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-right: 10px;
  float: left;
}
.child_div_1 {
  float: left;
  margin-right: 5px;
}

Controlla l'esempio funzionante su http://jsfiddle.net/c6242/1/

— hussein
fonte

1

Vuole che i bambini div siano allineati uno accanto all'altro, non i genitori (almeno questa era la mia comprensione ...)

— ehdv

4

Continuo a pensare display: table-cellche otterrà risultati più vicini a ciò che intende (da allora avranno la stessa altezza eccetera) ma in questo modo funzionerà sicuramente.

— ehdv

@ehdv display: table-cellnon è supportato in IE6 IE7. float: left; è il modo corretto per farlo.

— Hussein

In realtà il modo corretto per farlo in IE6,7 è con <tr><td>, perché qualsiasi altra opzione si interromperà quando l'utente ridimensiona la finestra. Nei browser moderni, di display: inline-blocksolito è l'opzione migliore.

— John Henckel

126

Poiché i div per impostazione predefinita sono block elementi, ovvero occuperanno l'intera larghezza disponibile, prova a utilizzare

display:inline-block;

Il divè ora reso in linea, cioè non interrompe il flusso degli elementi, ma sarà comunque trattato come un elemento di blocco.

Trovo questa tecnica più facile che lottare con floats.

Vedi questo tutorial per ulteriori informazioni - http://learnlayout.com/inline-block.html . Consiglierei anche gli articoli precedenti che portano a quello. (No, non l'ho scritto)

— Robin Maben
fonte

Mi è piaciuta molto questa soluzione. Il mio unico problema è che allinea la parte inferiore di entrambi i div invece di allineare la parte superiore. C'è un'impostazione rapida anche per questo?

— Chris

Suggerirei di utilizzare 2 wrapper divcon uguale altezza in modo che il contenuto al loro interno sembrerebbe essere allineato in alto.

— Robin Maben

2

Sono d'accordo. Questo è molto meglio che float:leftperché ti offre molte più opzioni senza ridefinire l'intero layout. Le cose "funzionano" in questo modo. Dai

— Jerry

12

Per ottenere l'allineamento verticale aggiungerei "vertical-align: top;"

— cdiggins

@ Chris: Sì, sono d'accordo con cdiggins. Questo dovrebbe aiutarti.

— Robin Maben

44

Ho trovato il codice seguente molto utile, potrebbe aiutare chiunque venga a cercare qui

<html>
<body>
    <div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
    <div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
    <div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>

Espandi lo snippet

— axs
fonte

11

Usare flexbox è semplicissimo!

#parent_div_1, #parent_div_2, #parent_div_3 {
    display: flex;
}

Esempio di violino

— Sol
fonte

6

Usando lo stile

.child_div_1 {
    float:left
}

— amit_g
fonte

5

Il meglio che funziona per me:

 .left{
   width:140px;
   float:left;
   height:100%;
 }

 .right{
   margin-left:140px;
 }

http://jsfiddle.net/jiantongc/7uVNN/

— jiantongc
fonte

2

Utente float:leftProprietà nella classe div figlio

controlla la struttura del div in dettaglio: http://www.dzone.com/links/r/div_table.html

— Pranay Rana
fonte

2

Utilizzando flexbox

   #parent_div_1{
     display:flex;
     flex-wrap: wrap;
  }

— dasfdsa
fonte