Как поменять местами элементы таким образом? Такое возможно без js?
HTML
<header class="header"> <div class="container"> <div class="header__top"> <a class="logo" href="#"> <img class="header__logo" src="images/header-logo.png" alt=""> </a> <nav class="nav"> <ul class="nav__list"> <li class="nav__list-item"> <a class="nav__list-link" href="#diagnostic">Диагностика</a> </li> <li class="nav__list-item"> <a class="nav__list-link" href="#price">Стоимость</a> </li> <li class="nav__list-item"> <a class="nav__list-link" href="#team">Мастера</a> </li> <li class="nav__list-item"> <a class="nav__list-link" href="#comments">Отзывы</a> </li> <li class="nav__list-item"> <a class="nav__list-link" href="#questions">Вопросы</a> </li> </ul> </nav> <div class="call"> <p class="call__text">Москва</p> <a href="#" class="call__button">Позвонить</a> </div> </div> |
<header class="header"> <div class="container"> <div class="header__top"> <a class="logo" href="#"> <img class="header__logo" src="images/header-logo.png" alt=""> </a> <nav class="nav"> <ul class="nav__list"> <li class="nav__list-item"> <a class="nav__list-link" href="#diagnostic">Диагностика</a> </li> <li class="nav__list-item"> <a class="nav__list-link" href="#price">Стоимость</a> </li> <li class="nav__list-item"> <a class="nav__list-link" href="#team">Мастера</a> </li> <li class="nav__list-item"> <a class="nav__list-link" href="#comments">Отзывы</a> </li> <li class="nav__list-item"> <a class="nav__list-link" href="#questions">Вопросы</a> </li> </ul> </nav> <div class="call"> <p class="call__text">Москва</p> <a href="#" class="call__button">Позвонить</a> </div> </div>
CSS
.header { background-image: url(../images/header-bg.jpg); background-size: cover; /* background-position: 100% 100%; */ background-repeat: no-repeat; min-height: 100vh; } .header__top { display: flex; justify-content: space-between; align-items: center; padding-top: 46px; } .logo { padding-bottom: 5px; } .nav { width: 50%; } .nav__list { display: flex; gap: 40px; } .call { display: flex; } .call__text { display: flex; align-items: center; padding-right: 40px; } .call__text::before { content: ''; padding-right: 10px; background-image: url(../images/geo.svg); background-repeat: no-repeat; min-width: 20px; min-height: 20px; } .call__button { padding: 18px 40px; font-weight: 700; background-color: transparent; border: 2px solid #FFC464; border-radius: 15px; color: #FFC464; cursor: pointer; transition: all .3s ease; } .call__button:hover { background-color: #fff; color: black; } |
.header { background-image: url(../images/header-bg.jpg); background-size: cover; /* background-position: 100% 100%; */ background-repeat: no-repeat; min-height: 100vh; } .header__top { display: flex; justify-content: space-between; align-items: center; padding-top: 46px; } .logo { padding-bottom: 5px; } .nav { width: 50%; } .nav__list { display: flex; gap: 40px; } .call { display: flex; } .call__text { display: flex; align-items: center; padding-right: 40px; } .call__text::before { content: ''; padding-right: 10px; background-image: url(../images/geo.svg); background-repeat: no-repeat; min-width: 20px; min-height: 20px; } .call__button { padding: 18px 40px; font-weight: 700; background-color: transparent; border: 2px solid #FFC464; border-radius: 15px; color: #FFC464; cursor: pointer; transition: all .3s ease; } .call__button:hover { background-color: #fff; color: black; }
Дополнительно:
Почему вы все боитесь JS? Не так уж он и сложен, как вы думаете.
да с флексом можно. order - в помощь.
Сделать через JS можно, а вот через CSS не знаю. Он не настолько интерактивный.
Please2334, флексы, гриды, order, display: contents. Ну или даже абсолюты...
Ответы:
CSS, @media, grid-template
- То-есть следует прописать display: grid контейнеру хедера, при мобильной ширине? А при обычной ширине можно оставить flex?
- Please2334, Можно и полность на grid.
Для широкого варианта одна строка "a b b b . c d"
Для узкого две строки "c b b b" и "a . . d" - Please2334, grid-template-areas
Как уже ответили выше можно использовать grid-template, а можно поиграть со флексами и попробовать применить order и @media для изменения положения элементов
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Да, такая задача вполне решаема без использования JavaScript. Для того чтобы поменять местами элементы на странице, можно воспользоваться CSS свойством `order`, которое позволяет управлять порядком отображения элементов без изменения HTML структуры.
Прежде всего, необходимо задать родительскому элементу свойство `display: flex;`, чтобы дочерние элементы стали флекс-элементами. Затем для каждого дочернего элемента задаем свойство `order` с нужным значением, чтобы изменить порядок их отображения.
Пример кода на PHP для смены местами двух элементов с классами "element1" и "element2" на странице:
.container { display: flex; } .element1 { order: 2; } .element2 { order: 1; } <div class="container"> <div class="element1">Элемент 1</div> <div class="element2">Элемент 2</div> </div>.container { display: flex; } .element1 { order: 2; } .element2 { order: 1; } <div class="container"> <div class="element1">Элемент 1</div> <div class="element2">Элемент 2</div> </div>
В данном примере мы задаем порядок отображения элементов, где элемент с классом "element1" будет отображаться вторым, а элемент с классом "element2" - первым. Таким образом, элементы поменяются местами на странице без использования JavaScript.