Блог

Главная - Вопросы по программированию - вертикальный индикатор выполнения начинается сверху, когда он должен начинаться снизу

вертикальный индикатор выполнения начинается сверху, когда он должен начинаться снизу

#css

#CSS

Вопрос:

Я пытаюсь построить вертикальный индикатор выполнения. Но при изменении значения «высота» на оранжевой полосе полоса поднимается сверху вниз. Я хочу, чтобы планка поднялась снизу вверх. Вверх ногами. Кто-нибудь знает, как этого добиться?

 .vertical-progress-bar {  height: 200px;  width: 40px;  border: 1px solid black; }  .vertical-progress {  height: 100px;  width: 40px;  background-color: orange; } 
 lt;div class="vertical-progress-bar"gt;  lt;div class="vertical-progress"gt;  lt;/divgt; lt;/divgt;

Ответ №1:

Один из способов-расположить внутренний div так, чтобы его дно находилось на дне его родительского элемента.

Примечание: родителю также необходимо указать позицию, иначе ребенок будет позиционироваться в соответствии со своим ближайшим предком, у которого есть позиция.

 .vertical-progress-bar {  height: 200px;  width: 40px;  border: 1px solid black;  position: relative; }  .vertical-progress {  height: 100px;  width: 40px;  background-color: orange;  position: absolute;  bottom: 0; } 
 lt;div class="vertical-progress-bar"gt;  lt;div class="vertical-progress"gt;  lt;/divgt; lt;/divgt;

Комментарии:

1. Работает как заклинание. Большое спасибо.

Метки: ,