CSS浮動反轉

Question

我想將類名稱為rangechart_box div放在右上角的范圍滑塊中，但是當我使用display: inline-block和float: right在一起時，它向下反轉，我該怎么做才能放在右上角的范圍滑塊中？

演示： https : //jsfiddle.net/g4xx50Ld/3/

我想要這樣，但在類名rangechart有float:right和沒有margin-right:-5px rangechart ： https margin-right:-5px

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

我希望它放在頂部和右邊沒有空格

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之間的空間。 您可以在這里閱讀更多內容。

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：

.rangechart_box {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.rangechart {
    background: #ea8755;
    width: 20%;
}

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