"display='block'" 没有将我的 DIV 保持在同一行

Question

我试图让两个 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;
}

我也只是 "block" 尝试了上述方法。但是如你所见，https://jsfiddle.net/Ldk7ovjp/1/，我的两个DIV在不同的行上。如何让它们保持在同一个上？

Answer 1

在 change class 上使用 display:inline-block 似乎有效：

.change {
  display:inline-block;
}

jsFiddle example

Answer 2

您必须将内联块应用于两个 div 元素：

.change{
  display: inline-block;
}

Answer 3

您将内联块应用于错误的元素。您必须将它应用到同一行上您想要的 div。 Fiddle

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

Answer 4

最后在css下方添加。

 #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

如果要添加显示内联块，请确保进行 class 更改。

.change {
  display:inline-block;
}

如果你想水平放置id为timeChanges的div，你可以使用inline-flex或flex。例如：

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

"display='block'" 没有将我的 DIV 保持在同一行

"display='block'" not keeping my DIVs on the same line

html

css

block

display