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

我也试过上面的“阻止”。但正如你所看到的，https://jsfiddle.net/Ldk7ovjp/1/，我的两个DIV在不同的路线上。如何将它们放在同一个上？

Answer 1

在display:inline-block课程中使用change似乎有效：

.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

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

next

如果要使用id timeChanges水平div，可以使用inline-flex或flex。例如：

return next(role_ for role_ in self.roles if role_.name==parameter)

“display ='block'”没有将我的DIV保持在同一条线上

5 个答案: