CSS: non è ansible posizionare due div uno di fianco all’altra

Come posso posizionare due div con un sacco di div per bambini l’una accanto all’altra? Voglio che la parte rossa sia giusta per la parte blu.

inserisci la descrizione dell'immagine qui

Nota: il nome e il cognome sono falsi, quindi non importa.

Il mio HTML:

 
Account Level:
Profile Views:
Messages:
0
Age:
Country:
Registered:
About Me:

Il mio CSS:

 *{ margin: 0px; padding: 0px; font-family: 'Ubuntu', sans-serif; } body{ background-color: #111111; margin: 1%; } #MainBody{ width: 60%; margin-left: auto; margin-right: auto; height: 800px; } #AccountFrame{ width: 100%; padding: 15px; height: 100%; background-color: #eeeeee; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; display: inline-block; } #DataFrame{ font-size: 2.0vh; padding: 15px; background-color: #eeeeee; border-radius-top: 4px; width: 100%; text-align: right; border-top-right-radius: 4px; border-top-left-radius: 4px; } #DataFrame ,.InfoLabels, .InfoData{ display: inline-block; } #AccountAvatar{ background-color: blue; width: 30%; } #AccountAvatar img{ width: 100%; } #sendPm{ width: 100%; height: 5.0vh; background-color: #0071ff; border: 0px; text-align: center; margin-left: auto; margin-right: auto; color: #1A1A1A; font-size: 2.0vh; } #sendPm:hover{ background-color: #308CFF; } .DetailLabel{ display: inline-block; width: 9.0vh; } .DetailInput{ width: 40%; display: inline; } .DetailObjects{ width: 100%; display: inline-block; background-color: red; margin-top: 1.0vh; } #AccountName{ color: #0071ff; } #AccountInfo{ width: 100%; font-size: 1.7vh; } 

Sono sicuro che si tratta di una semplice regola CSS o di alcune regole, ma non riesco a farlo bene. Inoltre quando è accanto a esso – ha bisogno di diffondersi automaticamente in altezza come la parte blu (incluso il pulsante).

Devi usare il float:left; proprietà di stile per #AccountAvatar e #AccountInfo . Imposta anche la width di #AccountInfo al 70% (larghezza rimanente).

Ristabilisci il tuo css per #AccountAvatar e #AccountInfo come segue:

 #AccountAvatar{ background-color: blue; width: 30%; float:left; } #AccountInfo{ width: 70%; font-size: 1.7vh; float:left; } 

Ecco una demo .

Un modo per ottenerlo è con display: table

Ecco una demo funzionante: http://jsbin.com/povajidesa/1/edit?html,output

Cosa ho cambiato:

  • aggiunto display: table al #AccountFrame regole #AccountFrame
  • aggiunto display: table-cell ai #AccountInfo regole #AccountAvatar e #AccountInfo
  • aggiunto vertical-align: top al #AccountInfo regole #AccountInfo per allineare il testo verticalmente, questo può essere modificato secondo necessità.