“ display ='block'”不将我的DIV保持在同一行

Question

I'm trying to get two DIVs to stay on the same horizontal plane. I have

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

and have tried the CSS

#timeChanges {
  display: inline-block;
}

I've also tried just "block" for the above. But as you can see, https://jsfiddle.net/Ldk7ovjp/1/ , my two DIVs are on different lines. How do I keep them on the same one?

Answer 1

Using display:inline-block on the change class seems to work:

.change {
  display:inline-block;
}

jsFiddle example

Answer 2

You have to apply the inline-block to both div elements:

.change{
  display: inline-block;
}

Answer 3

You are applying inline block to the wrong elements. You have to apply it to the divs you want on the same line. Fiddle

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

Answer 4

Add below css in the end.

 #oneWeekChange , #oneDayChange{
    float:left
    }

Full CSS is as below for your reference

#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

If you want to add display inline block, make sure to the class change.

.change {
  display:inline-block;
}

If you want to horizontally divs with id timeChanges, you can use inline-flex or flex. For example :

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