CSS浮动是相反的

Question

我希望在右上角范围滑块中添加类名为rangechart_box的div，但是当我同时使用display: inline-block和float: right时，它向下反转，我该怎么做才能放入右上角范围滑块？

DEMO：https://jsfiddle.net/g4xx50Ld/3/

我希望这样，但在float:right margin-right:-5px rangechart #slider-range{ width:100%; margin: 0 auto; background: #000; height: 6px; } .rangechart_box { position: relative; top: 6px; } .rangechart { background: #ea8755; display: inline-block; width: 20%; //margin-right: -5px; float: right; }中<div class="rangp" style="width: 100%;"> <div class="rangechart_box"> <div class="rangechart" style="height: 14px;"></div> <div class="rangechart" style="height: 18px;"></div> <div class="rangechart" style="height: 24px;"></div> </div> <div id="slider-range"></div> </div> https://jsfiddle.net/g4xx50Ld/4/

<g id="waveWrap">

<path>

我想把它放在顶部和右边没有空格

Answer 1

新编辑3：https://jsfiddle.net/g4xx50Ld/12/

.rangechart_box {
    text-align: right;
}

注意

 <div class="rangechart_box"><div class="rangechart" style="height: 14px;"
    ></div
    ><div class="rangechart" style="height: 18px;"></div
    ><div class="rangechart" style="height: 24px;"></div>
  </div>

你必须摆脱div之间的空格。 您可以阅读更多here。

Answer 2

使用 clearfix 。

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

然后将此类添加到您的div中。

<div class="rangechart_box clearfix">

Answer 3

您可以这样做：

.rangechart {
    background: #ea8755;
    display: inline-block;
    width: 20%;
    float: right;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

https://jsfiddle.net/g4xx50Ld/7/

Answer 4

你真的应该选择css flexbox：

function(){return this.foo;}

小提琴：https://jsfiddle.net/g4xx50Ld/10/