"display = 'block'" ne conserve pas mes DIVs sur la même ligne

Question

J'essaye d'obtenir que deux DIVs restent sur le même plan horizontal. Je

<div id="timeChanges"> 

<div id="oneDayChange" class="change"> 
      One day change 
     <div> 
      <div id="downArrow" class="downArrow arrow"></div> 
     - 14.961/-7.66 % 
     </div> 
    </div> 

    <div id="oneWeekChange" class="change"> 
      One week change 
     <div> 
      <div id="upArrow" class="upArrow arrow"></div> 
     + 34.863/17.851 % 
     </div> 
    </div> 

    </div> 

et ont essayé le CSS

#timeChanges { 
    display: inline-block; 
} 

J'ai aussi essayé juste "bloc" pour ce qui précède. Mais comme vous pouvez le voir, mes deux DIV sont sur des lignes différentes. Comment puis-je les garder sur le même?

Answer 1

En utilisant display:inline-block sur la classe change semble fonctionner:

.change { 
    display:inline-block; 
} 

jsFiddle example

Answer 2

Vous devez appliquer le inline-block aux deux éléments div:

.change{ 
    display: inline-block; 
} 

Answer 3

Vous êtes appliquer un bloc en ligne aux mauvais éléments. Vous devez l'appliquer aux divs que vous voulez sur la même ligne. Fiddle

#oneWeekChange, #oneDayChange { 
    display: inline-block; 
} 

Answer 4

Ajoutez ci-dessous css à la fin.

#oneWeekChange , #oneDayChange{ 
    float:left 
    } 

CSS complet est comme ci-dessous pour votre référence

#timeChanges { 
    display: inline-block; 
    float:left; 

} 

.arrow { 
    display: inline-block; 
    vertical-align: middle; 
} 
.arrow:after { 
    height: 30px; 
    width: 30px; 
    display: inline-block; 
    content: ''; 

} 

.upArrow:after { 
    background: linear-gradient(60deg, transparent 63%, #fff 63%), linear-gradient(-60deg, transparent 63%, #fff 63%), linear-gradient(to bottom, #ccc, #000); 

} 

.downArrow:after { 
    background: linear-gradient(120deg, transparent 63%, #fff 63%), linear-gradient(-120deg, transparent 63%, #fff 63%), linear-gradient(to top, #ccc, #000); 

} 

#oneWeekChange , #oneDayChange{ 
    float:left 
    } 

Answer 5

Si vous voulez ajouter l'affichage bloc en ligne, assurez-vous le changement de classe.

.change { 
    display:inline-block; 
} 

Si vous souhaitez divs horizontalement avec id timeChanges, vous pouvez utiliser inline-flex ou flex. Par exemple:

#timeChanges { 
    display:inline-flex; 
    //display: flex; 
}