Перейти к содержимому

Фотография
- - - - -

Отображение кода в разных местах на разных разрешениях


  • Вы не можете создать новую тему
  • Авторизуйтесь для ответа в теме
Сообщений в теме: 2

#1 S_A_N_T_A

S_A_N_T_A

    Прохожий

    Топикстартер
  • Новичок
  • 0
    1 сообщ.

Отправлено 28 Октябрь 2018 в 09:12

Всем доброго времени суток!
 
Возникла задача отображать код в разных местах на разных разрешениях.
 
Прилагаю картинку, там все наглядно обрисовал
 
5.jpg
 
1) Есть есть 3 блока которым нужно назначить порядочность отображения
2) 2 первых блока, которые расположены слева заключены в свой див
3) Далее они обтекаются третьим блоком, который должен идти справа от них
4) (Блок 2) при разрешении меньше 480px, должен сместиться под блок 3
5) Решения с применением "display: none" и другими приемами скрытия не подходят. Нужно, чтобы код отображался “или там” “или там”
6) Можно и визуально блоки переставить, главное чтобы контент в исходном коде не дублировался.
 
Решение нужно для того, чтобы на мобильной версии не скрывать текст. А переместить его в более удобное место, чтобы сделать акцент на более важной информации. И для СЕО будет полезно. Потому что через скрытие придется дублировать контент для отображения в другом месте. Надеюсь, вы меня поймете. Думаю будет много кому полезно.
 
К сожалению с программированием не знаком.
 
Пытался копать в сторону flexbox. Но в моем случае не получается, так как "блок 1" и "блок 2" заключены в общий div.

  • 0

Спонсор

#2 Volly

Volly

    Увлеченный

  • Участник
  • 110
    565 сообщ.

Отправлено 28 Октябрь 2018 в 13:40

Для широкого окна блокам пишите css-правила:

блок1 -ширина, высота, место и другое.

блок2 -ширина, высота, место и другое.

блок3 -ширина, высота, место и другое.

 

Добавляете для узкого окна блокам другие css-правила заключив их в медиа-условие @media screen (ширина_экрана<480px) {

блок1 -ширина, высота, место и другое.

блок2 -ширина, высота, место и другое.

блок3 -ширина, высота, место и другое.

}

 

Почитайте справочники по запросу "css media"


  • 0

#3 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1016
    3 712 сообщ.

Отправлено 28 Октябрь 2018 в 14:38

Это не поможет. Пока у него два блока заперты в другом блоке.

 

Можно передвинуть с помощью JS, то есть вытащить его из обрамляющего блока.  Но это очень плохое решение. Лучше в вёрстке изначально вытащить.

 

Можно через абсолютное позиционирование, если размеры фиксированные. Это точно не тот случай.

После можно на FLEX'ах или GRID'ах сделать любое сеоориентированное расположение.

То есть пока верста не будет последовательная

<div></div>
<div></div>
<div></div>

задуманное не сделать.


  • 0



Похожие темы Свернуть

Статистика

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей