Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/6: Рейтинг темы: голосов - 6, средняя оценка - 5.00
61 / 61 / 11
Регистрация: 19.09.2009
Сообщений: 844
1

Как управлять расположением блоков при адаптивной верстке ?

19.10.2014, 02:40. Показов 1211. Ответов 3
Метки нет (Все метки)

Есть 3 блока, они все стоят в ряд. При ресайзе на определенное разрешение нужно взять центровой блок и поместить вперед, остальные два под него, вот таким образом (вложение).


Возможно ли такое реализовать без flexbox?
0
Миниатюры
Как управлять расположением блоков при адаптивной верстке ?  
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
19.10.2014, 02:40
Ответы с готовыми решениями:

Высота блоков в адаптивной верстке
Есть код: <div class="links"> <div class="link1"></div> <div class="link2"></div> ...

Для чего в адаптивной верстке используются размеры блоков в процентах, а не в пикселях?
Ведь если сверстать в px, то потом в итоге браузер сам масштабирует страницу под конкретный экран...

Aside при адаптивной верстке
Здравствуйте. При сужении экрана надо чтобы один блок из сайдбара переместился над блоком контента,...

При адаптивной верстке получаеться что ширина экрана не 480х800, а 320х 533 Как с этим бороться?
При адаптивной верстке получаеться что ширина экрана не 480х800, а 320х 533 Как с этим бороться....

3
3 / 3 / 2
Регистрация: 31.08.2014
Сообщений: 15
19.10.2014, 07:01 2
Вам в помощь: HTMLBOOK.
0
417 / 379 / 163
Регистрация: 03.01.2013
Сообщений: 966
19.10.2014, 07:06 3
Лучший ответ Сообщение было отмечено nepster как решение

Решение

Красный блок в разметке расположить первым, но с помощью position:relative визуально сместить его и другие блоки.

С помощью bootstrap это можно сделать, например, так:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
  <div class="row">
    <div class="col-xs-12  col-sm-4  col-sm-push-4">
        <div class="content red">1</div>
      </div>
    <div class="col-xs-6  col-sm-4 col-sm-pull-4">
        <div class="content">2</div>
      </div>
    <div class="col-xs-6  col-sm-4">
        <div class="content">3</div>
      </div>
  </div>
</div>
http://jsbin.com/jedecu/1/edit?html,output
2
61 / 61 / 11
Регистрация: 19.09.2009
Сообщений: 844
19.10.2014, 15:05  [ТС] 4
большое спасибо. Я не знал, что так можно сделать на бутстрапе. Правда я использую его по минимуму и компилировал без сеток, но я глянул технологию реализации и организовал у себя. Еще раз большое спасибо.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
19.10.2014, 15:05

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Меню при адаптивной верстке
Изучаю css не получается нормально адаптировать меню что бы в адаптивной верстке полностью...

Высота блока при адаптивной верстке
Всем мир. Страница с 4 блоками в ряд. При мобильной версии возникает такая хня (скриншот). Задать...

Дефолтная ширина для мобильников при адаптивной верстке
С одним человеком у нас возник разговор - он утверждал, что ему в макете достаточно ширины 400px, я...

Как убрать элемент при клике на телефоне при адаптивной верстке?
Здравствуйте!Делаю сайт, и при адаптивной верстке,для телефона, мне надо, чтобы при нажатии на...


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

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.