"display = 'block'"私のDIVを同じ行に保存しない

Question

私は同じ水平面に2つのDIVを残そうとしています。私は

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

を持っていると私はまた、上記のためだけの "ブロック" を試してみたCSS

#timeChanges { 
    display: inline-block; 
} 

を試してみました。しかし、あなたが見る通り、https://jsfiddle.net/Ldk7ovjp/1/、私の2つのDIVは異なる行にあります。どのように私はそれらを同じものに保つのですか？ changeクラスにdisplay:inline-blockを使用して

Answer 1

が動作しているようです：

.change { 
    display:inline-block; 
} 

jsFiddle example

Answer 2

あなたは両方のdiv要素にインラインブロックを適用する必要があります。

.change{ 
    display: inline-block; 
} 

Answer 3

あなたは、間違った要素にインラインブロックを適用する同じ行にあるdivにそれを適用する必要があります。 Fiddle

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

Answer 4

最後に以下を追加してください。

#oneWeekChange , #oneDayChange{ 
    float:left 
    } 

のフルCSSあなたが表示インラインブロックを追加したい場合は、クラスへの変化を確認してくださいあなたの参考のために以下のように

#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

です。

.change { 
    display:inline-block; 
} 

id timeChangesで水平方向に分割したい場合は、inline-flexまたはflexを使用できます。 例：

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