Задать вопрос
@malayamarisha
css

Как позиционироваться от блока, у которого изменяется размер?

Всем привет.
<div class="top-menu">

    <div class="menu-top container-main topbar-city">
        <div class="container-menu header menu-top__full mobile-md-hide">
            <div class="wrap  topbar-city ">
                <div class="citi_selector_wrapper item city-selector ">
                // здесь выбор города
                </div>

                <ul class="menu-top__list">
                // здесь пункты меню
                </ul>
            </div>
        </div>
        <div class="menu-top__lang">
        // здесь выбор языка
        </div>
    </div>

</div>


Подскажите, пожалуйста, как спозиционировать блок "Выбор языка" в зависимости от размера блока "Выбор города"?

Сейчас у 
.menu-top__lang {
    position: absolute;
    left: 9rem;
    z-index: 1000;
}
и если название города не большое, то всё норм63e4b30364c5e319260942.png
Но как быть, если блок "Выберите город" будет больше из-за названия города? 63e4b3287af32912505845.png
  • Вопрос задан
  • 49 просмотров
2 комментария
Подписаться 1 Простой 2 комментария
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Абсолюты убрать.
.topbar-city {
  display: flex;
  gap: 2rem;
}


Абсолюты вообще не используйте никогда. Только для выпадающих элементов, для размещения декоративных элементов и тому подобные случаи.
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 1
noder_ss
@noder_ss
Линуксоид-энтузиаст и SQL разработчик
Если я правильно понял, то должно адаптивно работать как-то так:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="block">
  <div>Выберите город</div>
  <div>Язык</div>
  <div class="items"><p>пункт1</p>
  <p>пункт2</p>
  <p>пункт3</p>
  <p>пункт4</p>
  <p>пункт5</p></div>
  </div>
</body>
<style>
  .block{
    display: flex;
    height: 80px;
    align-items: center;
    width: 100%;
    justify-content: space-around;
  }
  .items{
    display: flex;
    justify-content: space-around;
    width: 400px;
  }
</style>
</html>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Требуется консультация по UX-дизайну казино
24 нояб. 2024, в 01:35
5000 руб./за проект
Расширение для браузера
24 нояб. 2024, в 01:24
500 руб./за проект
Создать сервер VPS через wireguard
24 нояб. 2024, в 00:04
5000 руб./за проект
Ещё заказы