Flex. Как выровнять класс по правому краю?
.iqdropdown-buttons
button.iqdropdown-button_clean очистить
button.iqdropdown-button_apply применить
.iqdropdown-buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
}
так всё отображается правильно, но если добавить класс .display-none { display: none; } вот так
.iqdropdown-buttons
button.iqdropdown-button_clean .display-none очистить
button.iqdropdown-button_apply применить
то кнопка "применить" перемещается к левому краю, на место кнопки "очистить".
Как сделать чтобы она оставалась на месте ?
Ответы (2 шт):
Заходим в документацию и читаем, что делает .display-none
http://htmlbook.ru/css/display
Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента.
Очевидно, проблема из-за него. А для решения проблемы неплохо было бы прикрепить html код и CSS, чтобы воспроизвести проблему.
Вместо
.display-none {
display: none;
}
поставьте
.display-none {
visibility: hidden;
}
или
.display-none {
opacity: 0;
}