CSS floatが反転されています

Question

右上の範囲スライダにクラス名rangechart_boxを入れたいのですが、display: inline-blockとfloat: rightを一緒に使用すると、下方向が逆になります。右上の範囲スライダに入れるにはどうすればよいですか？

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

私はこのようにそれをしたいが、クラス名rangechartでfloat:rightとmargin-right:-5pxなしで：https://jsfiddle.net/g4xx50Ld/4/

#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%;"> 
 
\t <div class="rangechart_box"> 
 
\t \t <div class="rangechart" style="height: 14px;"></div> 
 
\t \t <div class="rangechart" style="height: 18px;"></div> 
 
\t \t <div class="rangechart" style="height: 24px;"></div> 
 
\t </div> 
 
    <div id="slider-range"></div> 
 
</div>

私はそれが上と右に入れたいですスペースなしの場合

Answer 1

は、あなたは本当にCSSのフレキシボックスのために行く必要があります。

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

フィドル：https://jsfiddle.net/g4xx50Ld/10/

Answer 2

新規編集3：https://jsfiddle.net/g4xx50Ld/12/

.rangechart_box { 
    text-align: right; 
} 

お知らせあなたはdivの間のスペースを取り除くために必要があり

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

。 詳細hereを読むことができます。

Answer 3

clearfixを使用してください。

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

次に、このクラスをこのようにdivに追加します。

<div class="rangechart_box clearfix"> 

Answer 4

あなたはこのような何かを行うことができます。

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

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