Я хочу поместить div с именем класса rangechart_box в верхний правый ползунок диапазона, но когда я использую display: inline-block и float: right вместе, он переворачивается вниз, что мне делать, чтобы поместить в верхний правый ползунок диапазона?

ДЕМО: https://jsfiddle.net/g4xx50Ld/3/

Я хочу, чтобы это было так, но с float:right и без margin-right:-5px в имени класса rangechart: 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%;">
	<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>

Я хочу положить его сверху и справа без пробелов

0
Me hdi 6 Янв 2017 в 16:06

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/

1
leoap 6 Янв 2017 в 13:26

Новая редакция 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. Вы можете прочитать больше здесь.

2
Alan 6 Янв 2017 в 13:33

Используйте clearfix .

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

Затем добавьте этот класс в ваш div вот так.

<div class="rangechart_box clearfix">
1
enucar 6 Янв 2017 в 13:11

Вы можете сделать что-то вроде этого:

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

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

1
Serg Chernata 6 Янв 2017 в 13:18