Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум web-программистов > HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
0 / 0 / 0
Регистрация: 15.06.2025
Сообщений: 22

Как поменять расположение блоков в зависимости от ширины страницы?

09.08.2025, 00:38. Показов 1009. Ответов 5
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
как сделать чтобы из меню на первом скриншоте получилось то что на втором скриншоте?

реально ли это сделать без js?
Миниатюры
Как поменять расположение блоков в зависимости от ширины страницы?   Как поменять расположение блоков в зависимости от ширины страницы?  
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
 09.08.2025, 00:38
Ответы с готовыми решениями:

Создать html страницу с одним блоком шириной 600px, расположенным по центру экрана
Создать html страницу с одним блоком шириной 600px, расположенным по центру экрана и...

ширина блока в зависимости от его содержимого. как?
<div class="head">"Современные технологии"</div> что надо сделать для .head что бы длина блока...

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

5
 Аватар для abit
870 / 529 / 149
Регистрация: 03.02.2013
Сообщений: 1,847
09.08.2025, 00:51
Цитата Сообщение от Kranc Посмотреть сообщение
реально ли это сделать без js?
да, а что помешало сделать?
не весь мир крутится на js
0
0 / 0 / 0
Регистрация: 15.06.2025
Сообщений: 22
09.08.2025, 01:03  [ТС]
помешало то что не умею
0
1030 / 682 / 297
Регистрация: 04.04.2013
Сообщений: 2,751
09.08.2025, 18:52
Цитата Сообщение от Kranc Посмотреть сообщение
реально ли это сделать без js?
Да, это делается через @media css.
0
0 / 0 / 0
Регистрация: 15.06.2025
Сообщений: 22
11.08.2025, 14:04  [ТС]
вот что у меня получилось. как сделать чтобы блоки не были в виде таблицы, а упирались в вышестоящие?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<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_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_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_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>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

.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;
    }
    .footer_2{
        order: 3;
    }
    .footer_4{
        order: 3;
    }
}
Миниатюры
Как поменять расположение блоков в зависимости от ширины страницы?  
0
Эксперт JSЭксперт HTML/CSS
 Аватар для krvsa
3832 / 1667 / 431
Регистрация: 14.03.2022
Сообщений: 4,214
11.08.2025, 14:57
Кину и сюда...

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<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>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
 11.08.2025, 14:57
Помогаю со студенческими работами здесь

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

Расположение блоков друг под другом если нету места в ширину
Главный блок имеет 100% внутри него 3 блока с шириной 33.333333333% Так вот как сделать так ,...

Изменение расположения блока при ширине экрана меньше 500px
Есть код &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; ...

Как сделать высоту равной ширине при ширине 100%?
как можно сделать элемент(например таблицу) квадратным, т.е. высота равна ширине(ширина 100%)

Как ограничить ширину контента (текста не затрагивая ширину фона)
Создал базовую разметку в css grid и появилась идея чтоб контент сайта ограничился в ширину в...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer
8Observer8 08.02.2026
Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств
8Observer8 07.02.2026
Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru