“display='block'” 不让我的 DIV 在同一行答案

【问题标题】："display='block'" not keeping my DIVs on the same line“display='block'” 不让我的 DIV 在同一行
【发布时间】：2017-08-18 20:33:49
【问题描述】：

我试图让两个 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/，我的两个 DIV 位于不同的行上。如何使它们保持在同一个上？

【问题讨论】：

标签： html css block display

【解决方案1】：

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

.change {
  display:inline-block;
}

jsFiddle example

【讨论】：

【解决方案2】：

您必须将 inline-block 应用于两个 div 元素：

.change{
  display: inline-block;
}

【讨论】：

【解决方案3】：

您将内联块应用于错误的元素。您必须将其应用于同一行上所需的 div。 Fiddle

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

【讨论】：

【解决方案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
    }

【讨论】：

【解决方案5】：

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

.change {
  display:inline-block;
}

如果你想用 id timeChanges 横向 div，你可以使用 inline-flex 或 flex。例如：

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

【讨论】：