0

Не знаю кому как, но мне данная задачка показалась сложноватой, ибо знания css не сильно велики. В общем задача, есть 2 блока:

 _______________
| 1 | 2 | пусто |
|1.1|           |
|1.2|           |
|1.3|           |

При большом разрешении экрана должно быть так, как на схеме выше. При уменьшении размера окна браузера или при разрешении экрана, например, меньше 1280px схема должна быть такой:

 _______________
| 2 |   пусто   |
 ---------------
| 1  1.1 1.2 1.3|

Т.е. блок 2 смещается влево, а блок 1 располагается под ним. В блоке 1 несколько div'ов, которые в 1-м случае располагаются в столбик, а во 2-м случае в строке.

Может есть у кого идей на этот счет, буду признателен...

P.S. на поддержку старых браузеров начхать.

P.P.S. блок 1 - имеет фиксированную ширину в 200px

UPDATE

Если будет проще, то давайте возьмем все фиксированной ширины, кроме разрешения.

Блок 1 - 200px,
Блок 2 - 900px.

И еще раз опишу, надо чтоб все прижималось к левому краю, но при уменьшении разрешения чтоб 1-й блок уходил под 2-й, а не наоборот.

1
  • Я бы в таком случае написал бы скрипт, который всё бы раставлял. Хотя знаю, что это и не правильно
    – kandi
    24 окт 2012 в 12:55

4 ответа 4

2

смотреть в сторону адаптивный и мобильный дизайн с CSS3 Media Queries. Вот тебе пару ссылок

5
  • если бы во 2-м случае надо было бы чтоб 2-й блок располагался под 1-м - это пару минут работы, а проблема как раз в том, что они должны поменяться местами при уменьшении размера экрана. Пробовал делать float:left у блока 1 и через @media screen and (min-width: 1280px) float:right у блока 2, тогда все работает как надо, только вот проблема, если разрешение экрана очень большое, то левый блок прижат к левому краю, правый - к правому, а посередине большая "дырка"
    – DemoS
    24 окт 2012 в 7:39
  • ну а ты сделай если ширина еще больше то опять поменяй дизайн.
    – koza4ok
    24 окт 2012 в 7:42
  • А например? При разрешении 1400 пикс. все отлично отображается, левый слева, правый справа (т.к. флоаты), при уменьшении разрешения у правого убираем флоат и все. А что делать тогда при увеличении разрешения, чтоб между правым и левым блоками не появлялся огромный пробел?
    – DemoS
    24 окт 2012 в 7:57
  • сменить ширину блока(родителю можно уменьшить и тогда дырки такой не будет).
    – koza4ok
    24 окт 2012 в 8:04
  • да не, это не выход. блок 2 прижат с помощью float:right - это "костыль", который я поставил из-за недостаточных знаний css, так быть точно не должно, все должно прижиматься к левому краю. Потому и ширину обертки в зависимости от разрешения задавать незачем. upd.вопрос
    – DemoS
    24 окт 2012 в 8:41
2

Мой ответ, скорее можно считать оффтоп, но думаю, что может пригодиться на будущее. Статьи вы конечено почитайте, т.к. некоторые моменты просто надо знать. А я подскажу вам предельно простой способ, который пришел мне сразу же на ум, как только я начал делать свою первую адаптивную верстку. Создав стили под обычное разрешение экрана, я убирал все основные стили разметки, изменял размер браузера до нужного мне и писал стили уже так, как бы я хотел видеть расположение блоков в данном случае. Далее сравнивал оба стиля для каждого блока, определял те, которые не изменились и под праилом @media, оставлял стили, которые относятся именно к уменьшенному разрешению.

1
  • Благодарю за совет, обязательно учту на будущее!
    – DemoS
    24 окт 2012 в 8:57
1

Если вас озадачивает не предвидено очень большое разрешение экрана, то не проще ли добавить max- width, тем более что у вас уже есть min-width.

1

А как Вам идея создать 3 блока: "пусто", "2" и "1" все с float:right, все кроме первого - фиксированной ширины.. У блока "пусто" цвет под фон бодобрать и ширину 180px (?), а чтобы "1" не отрывался от левого края - сунуть их все в 4-й блок шириной в 1280px, и прижать влево float-ом или спозиционировать..

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.