Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Как поменять расположение блоков в зависимости от ширины страницы? (https://javascript.ru/forum/xhtml-html-css/86574-kak-pomenyat-raspolozhenie-blokov-v-zavisimosti-ot-shiriny-stranicy.html)

railbro 09.08.2025 17:34
Вложений: 2
как сделать чтобы при одном и том же html меню при узком экране было то что на первом скриншоте, а при широком то что на втором скриншоте?
реально ли это сделать без js?

скриншоты в нормальном разрешении:
https://www.cyberforum.ru/attachment...031d1754688598
https://www.cyberforum.ru/attachment...030d1754688598

Nexus 09.08.2025 23:07
Смотрите в сторону css media queries

railbro 11.08.2025 13:13
Вложений: 1
<div class="footer-columns">
	<ul class="footer_1">
		<li class="footer-item item_hover"><a href="#" class="footer-item">Продукты</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Документооборот</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Архив</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Электронная подпись HoReCa</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Маркировка</a></li>
		<li class="footer-item"><a href="#" class="footer-link">GLN</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Аутстаффинг</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Меркурий</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Факторинг</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Склад</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Территория</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Транспорт</a></li>
	</ul>
	<ul class="footer_2">
		<li class="footer-item item_hover"><a href="#" class="footer-item">Пресс-центр</a></li>
		<li class="footer-item item_hover"><a href="#" class="footer-item">Контакты</a></li>
		<li class="footer-item item_hover"><a href="#" class="footer-item">Вопрос-Ответ</a></li>
		<li class="footer-item item_hover"><a href="#" class="footer-item">Техподдержка</a></li>
		<li class="footer-item item_hover"><a href="#" class="footer-item">Полезные статьи</a></li>
	</ul>
	<ul class="footer_3">
		<li class="footer-item item_hover"><a href="#" class="footer-item">Способы оплаты</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Web-интерфейс</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Интеграция 1С</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Интеграция через API</a></li>
	</ul>
	<ul class="footer_4">
		<li class="footer-item item_hover"><a href="#" class="footer-item">Компания</a></li>
		<li class="footer-item"><a href="#" class="footer-link">О компании</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Партнеры</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Отзывы</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Лицензии</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Кейсы</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Акции</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Платформа</a></li>
		<li class="footer-item"><a href="#" class="footer-link">LERADATA</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Лицензионный договор</a></li>
	</ul>
</div>



.footer-columns {
	display: flex;
}
.footer_1{
	order: 1;
}
.footer_2{
	order: 4;
}
.footer_3{
	order: 2;
}
.footer_4{
	order: 3;
}
@media (max-width:1000px) {
	.footer-columns {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 10px;
		grid-row-gap: 10px;
	}
	ul, li{
		//width: auto;
		width: max-content;
	}
@media (max-width:1000px) {
	.footer-columns {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 10px;
		grid-row-gap: 10px;
	}
	ul, li{
		//width: auto;
		width: max-content;
	}
	.footer_2{
		order: 3;
	}
	.footer_4{
		order: 3;
	}
}
}

railbro 11.08.2025 13:17
Вложений: 1
вот что получилось. как сделать, чтобы блок 4, который начинается со слова "Компания" упирался в вышестоящий блок?

ksa 11.08.2025 14:45
railbro, вроде бы такое тебе нужно...

<style>
.footer-columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* или вот так
	display: flex;
	justify-content: space-between;
	*/
}
.footer_1 { 
	order: 1; 
}
.footer_2 { 
	order: 4; 
}
.footer_3 { 
	order: 2; 
}
.footer_4 { 
	order: 3; 
}
@media (max-width: 1000px) {
	.footer-columns {
		display: block;
		column-count: 2;
	}
	.footer_2 { 
		break-inside: avoid;
	}
}
</style>

<div class="footer-columns">
	<ul class="footer_1">
		<li class="footer-item item_hover"><a href="#" class="footer-item">Продукты</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Документооборот</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Архив</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Электронная подпись HoReCa</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Маркировка</a></li>
		<li class="footer-item"><a href="#" class="footer-link">GLN</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Аутстаффинг</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Меркурий</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Факторинг</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Склад</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Территория</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Транспорт</a></li>
	</ul>
	<ul class="footer_2">
		<li class="footer-item item_hover"><a href="#" class="footer-item">Пресс-центр</a></li>
		<li class="footer-item item_hover"><a href="#" class="footer-item">Контакты</a></li>
		<li class="footer-item item_hover"><a href="#" class="footer-item">Вопрос-Ответ</a></li>
		<li class="footer-item item_hover"><a href="#" class="footer-item">Техподдержка</a></li>
		<li class="footer-item item_hover"><a href="#" class="footer-item">Полезные статьи</a></li>
	</ul>
	<ul class="footer_3">
		<li class="footer-item item_hover"><a href="#" class="footer-item">Способы оплаты</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Web-интерфейс</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Интеграция 1С</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Интеграция через API</a></li>
	</ul>
	<ul class="footer_4">
		<li class="footer-item item_hover"><a href="#" class="footer-item">Компания</a></li>
		<li class="footer-item"><a href="#" class="footer-link">О компании</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Партнеры</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Отзывы</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Лицензии</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Кейсы</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Акции</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Платформа</a></li>
		<li class="footer-item"><a href="#" class="footer-link">LERADATA</a></li>
		<li class="footer-item"><a href="#" class="footer-link">Лицензионный договор</a></li>
	</ul>
</div>


Часовой пояс GMT +3, время: 21:56.