Адаптивное перемещение блока

@UsernameN · Регистрация: 09.11.2016

Студворк — интернет-сервис помощи студентам

Доброго времени суток, уважаемые форумчане.

Сделал сайт на Wordpress, это мой первый любительский опыт, потому экспериментирую. Адаптивный дизайн в используемом мной шаблоне уже есть, и некоторые изменения я уже внёс, но столкнулся с некоторыми сложностями, и очень надеюсь на вашу помощь, уважаемые пользователи :-)

Я добавил левый сайдбар с блоком "Вам будет интересно" и сделал его видимым только при разрешении монитора 1025px и более.
Потом подумал, что так не пойдёт, пользователи со смартфонов и планшетов не будут видеть список располагающихся там статей и не будет переходов (оттого высокий процент отказов).
И тогда я решил скрыть часть списка заголовков статей, что располагаются в левом сайдбаре и сделал возможность их открытия по ссылке "Показать ещё".
Теперь этот сайдбар можно показывать всегда, но РАЗМЕСТИВ его ПЕРЕД правым сайдбаром (рисунок прикрепил к посту), с заимствованием ширины последнего. Как реализовать размещение левого сайдбара перед правым при разрешении дисплея вплоть до 1024px, а с 1025px возвращения его обратно в левую сторону?

Страницу с макетом прикрепил, в этом единственном файле и стили и js код.

@UsernameN · 12.02.2017, 18:41 **[ТС]**

Сделал макет страницы на сервисе [del]
Никак не могу реализовать перемещение, как на прикреплённом скриншоте.
Помогите пожалуйста.

Комментарий модератора

Коды программ должны находиться на форуме! (Правила п.4.11)

@N3stY · 12.02.2017, 22:25

UsernameN,

CSS
1
2
3
4
5
6
7
8
@media screen and (max-width: 1024px) {
  /* Код CSS */
  /* Позиционирование для маленьких дисплеев */
}
@media screen and (min-width: 1025px) {
  /* Код CSS */
  /* Позиционирование для больших дисплеев */
}

@UsernameN · 12.02.2017, 22:54 **[ТС]**

N3stY
Спасибо что окликнулиcь. Я так и прописал, но он за место перемещения перед сайдбаром, перемещает его под сайдбар. В итоге всё сдвигается непонятно куда

Как его втиснуть перед главным сайдбар-ом ума не приложу.. эти плавающие блоки.. беда просто :-(

@N3stY · 13.02.2017, 19:52

UsernameN, если вы выравниваете их с float:right, то блок который должен идти первым ставьте его под вторым т.е.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@media screen and (max-width: 1024px) {
      .left-side {
        float: right;
      }
      .center {
        float: left;
      }
      .right-side {
        float: right;
      }
    }
    @media screen and (min-width: 1025px) {
      .left-side {
        float: left;
      }
      .center {
        float: left;
      }
      .right-side {
        float: right;
      }
    }

HTML5
1
2
3
  <div class="right-side"></div>
  <div class="left-side"></div>
<div class="center"></div>

@UsernameN · 13.02.2017, 21:00 **[ТС]**

N3stY
Спасибо что откликнулись. У меня нарушена структура, точнее она иначе построена т.к. при сворачивании тега id="main" в Notepad++ скрывается и блок, что относятся к области правого сайдбара. А вот второй (левый) сайдбар я вроде вставил правильно, хотя не совсем понятно, а точнее совсем непонятно что делать с вертикальной перегородкой правой стороны левого сайдбара. Я использую готовый шаблон (тему wordpress) с небольшими модификациями, а там php код вкупе с кодом, менять структуру шаблона... переностить правый сайдбар за область main (в которой контент), это я не осилю на текущий момент

А добивает эту ситуацию тот факт, что у меня старый монитор с разрешением 1024 на 768, и чтобы мне что-то потестить на большем физическом разрешении, мне приходится открывать консоль разработчика и там эмулировать, в итоге всё уменьшается, и так с каждым измением, что я сделал в Notepad++. Это просто какой то АД

@UsernameN · 13.02.2017, 22:06 **[ТС]**

Я уже было обрадовался что решил задачу, перенеся блок leftbar, но сломал этим адаптивный дизайн. Да что же такое то

Файлик с работающим перемещением сайдбара, но при этом поломанным адаптивным дизайном прикрепил

@UsernameN · 13.02.2017, 22:23 **[ТС]**

Я вот думаю, а вообще возможно ли это? Неспроста в этом шаблоне такая сложная структура, в которой новичок вроде меня сломает мозг. Ведь данный шаблон адаптивный и получается что в мобильном представлении (до 768px) идёт шапка, потом контент, а уже потом сайдбар. Если разместить блок левого сайдбара до контента, то в адаптивном представлении он будет отображаться до контента. Что неправильно. Необходимо сохранить структуру в том числе и в мобильном представлении: шапка -> контент -> правый сайдбар -> левый сайдбар. И только от 768px и до 1024px разместить в правой части страницы контент левого садбара, а сразу за ним правого. А уже от 1025px переносить левый сайдбар с контентом в левую часть...

Вот так вот реально сделать?

@N3stY · 14.02.2017, 13:28

UsernameN, хм. Ну тут уж лучше делать так

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
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
.left-side, .center, .right-side {
  padding: 1.75rem;
  margin: .75rem;
  background: red;
  box-sizing: border-box;
}
 
.left-side, .right-side {
  width: 15%;
  margin-left: auto;
  left: auto;
  right: auto;
}
 
.center {
  width: 67%;
  margin-left: auto;
  left: auto;
  right: auto;
}
 
.mobile {
  display: none;
}
 
@media screen and (max-width: 991px) {
  .left-side {
    display: none;
  }
 
  .mobile {
    display: block;
  };
}
 
@media screen and (max-width: 1024px) {
  .left-side {
    float: right;
    width: 100%;
  }
 
  .center {
    float: left;
    width: 100%;
  }
 
  .right-side {
    float: right;
    width: 100%;
  };
}
 
@media screen and (min-width: 1025px) {
  .left-side {
    float: left;
  }
 
  .center {
    float: left;
  }
 
  .right-side {
    float: right;
  };
}

HTML5
1
2
3
4
  <div class="left-side">left</div>
  <div class="center">center</div>
  <div class="left-side mobile">left mobile</div>
  <div class="right-side">right</div>

"живой" пример

@UsernameN · 14.02.2017, 16:34 **[ТС]**

N3stY
На живом примере я увидел переключение с первого не третье состояние. А второго состояния (с 768px до 1024px) не было вовсе :-(

@SergioSup · 15.02.2017, 15:16

схематично нарисовал так

HTML5
1
2
3
4
5
6
<header></header>
<div class="main">
    <div class="center">center</div>
    <div class="left">left</div>
    <div class="right">right</div>
</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
35
36
37
38
39
40
header {
    height: 100px;
    margin-bottom: 15px;
    background: green;
}
.left,.right {
    height: 250px;
    background: blue;
}
.center {
    background: yellow;
}
.right {
    background: pink;
}
@media screen and (min-width: 700px) {
    .center {
        width: 75%;
        float: left;
    }
    .left,.right {
        width: 25%;
        float: right;
    }
    .right {
        clear: right;
    }
}
@media screen and (min-width: 1024px) {
    .center {
        width: 50%;
        position: relative;
        left: 25%;
    }
    .left {
        position: relative;
        left: -50%;
        float: left;
    }
}

есть ещё [del] вариант на flexbox, может подойдет

Комментарий модератора

Коды программ должны находиться на форуме! (Правила п.4.11)

@aj17 · 16.02.2017, 10:25

Набросал простой пример "на коленке":

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
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        line-height: 1;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .center{
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 10px;
    }
    
    .header{
        height: 64px;
        line-height: 64px;
        margin-bottom: 10px;
        background-color:  #d28888;
        text-align: center;
    }
    
    .content{
        height: 320px;
        margin-bottom: 10px;
        line-height: 320px;
        background-color:  #a9909a;
        text-align: center;
    }
    
    .sidbar{
        height: 155px;
        line-height: 155px;
        margin-bottom: 10px;
        background-color:  #727284;
        text-align: center;
    }
    
    .wrap{
        position: relative;
    }
    
    @media (min-width: 768px){
        .content{
            float: left;
            width: 66.666666%;
        }
        
        .sidbar{
            margin-left: calc(66.666666% + 10px);
        }
    }
    
    @media (min-width: 1024px){
        .content{
            margin-left: 33.333333%;
            float: none;
            width: 33.333333%;
        }
 
        .sidbar{
            margin-left: 0;
            position: absolute;
            top: 0;
            width: calc(33.333333% - 10px);
            height: 320px;
            line-height: 320px;
        }
        
        .sidbar.l_sidbar{
            left: 0;
        }
        
        .sidbar.r_sidbar{
            right: 0;
        }
    }
    
 
    
</style>
<body>
   <div class="center">
       <div class="header">header</div>
 
       <div class="wrap">
           <div class="content">content</div>
           <div class="l_sidbar sidbar">l_sidbar</div>
           <div class="r_sidbar sidbar">r_sidbar</div>
       </div>
   </div>
   
    
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .

@UsernameN 0 / 0 / 0 Регистрация: 09.11.2016 Сообщений: 71
	12.02.2017, 22:54 [ТС]
	N3stY Спасибо что окликнулиcь. Я так и прописал, но он за место перемещения перед сайдбаром, перемещает его под сайдбар. В итоге всё сдвигается непонятно куда Как его втиснуть перед главным сайдбар-ом ума не приложу.. эти плавающие блоки.. беда просто :-( 0

@UsernameN 0 / 0 / 0 Регистрация: 09.11.2016 Сообщений: 71
	13.02.2017, 21:00 [ТС]
	N3stY Спасибо что откликнулись. У меня нарушена структура, точнее она иначе построена т.к. при сворачивании тега id="main" в Notepad++ скрывается и блок, что относятся к области правого сайдбара. А вот второй (левый) сайдбар я вроде вставил правильно, хотя не совсем понятно, а точнее совсем непонятно что делать с вертикальной перегородкой правой стороны левого сайдбара. Я использую готовый шаблон (тему wordpress) с небольшими модификациями, а там php код вкупе с кодом, менять структуру шаблона... переностить правый сайдбар за область main (в которой контент), это я не осилю на текущий момент А добивает эту ситуацию тот факт, что у меня старый монитор с разрешением 1024 на 768, и чтобы мне что-то потестить на большем физическом разрешении, мне приходится открывать консоль разработчика и там эмулировать, в итоге всё уменьшается, и так с каждым измением, что я сделал в Notepad++. Это просто какой то АД 0

@UsernameN 0 / 0 / 0 Регистрация: 09.11.2016 Сообщений: 71
	13.02.2017, 22:23 [ТС]
	Я вот думаю, а вообще возможно ли это? Неспроста в этом шаблоне такая сложная структура, в которой новичок вроде меня сломает мозг. Ведь данный шаблон адаптивный и получается что в мобильном представлении (до 768px) идёт шапка, потом контент, а уже потом сайдбар. Если разместить блок левого сайдбара до контента, то в адаптивном представлении он будет отображаться до контента. Что неправильно. Необходимо сохранить структуру в том числе и в мобильном представлении: шапка -> контент -> правый сайдбар -> левый сайдбар. И только от 768px и до 1024px разместить в правой части страницы контент левого садбара, а сразу за ним правого. А уже от 1025px переносить левый сайдбар с контентом в левую часть... Вот так вот реально сделать? Миниатюры 0

@UsernameN 0 / 0 / 0 Регистрация: 09.11.2016 Сообщений: 71
	14.02.2017, 16:34 [ТС]
	N3stY На живом примере я увидел переключение с первого не третье состояние. А второго состояния (с 768px до 1024px) не было вовсе :-( 0