Можно ли сверстать такое адаптивно?

Question

[merss]

Можно ли сверстать такое адаптивно?

Answer 1

[Александр Юдаев]

да, варианта два:
1. каждый столбик будет адаптивной колонкой , первые два с отступами сверху.
2. более гиморойный margin с отрицательными значениями в одной из колонок.

это на уровне css. можно и шаманить с js.

Answer 2

[Юрий Молотов]

Тут куча вариантов, в зависимости от того, как это должно адаптироваться, вот пара:

1. Пропорциональное уменьшение:
Три колонки (длинные дивы) с шириной 33.3%, у изображений width:100%; height:auto;

2. Блочный перенос.
Ширина блоков фиксированная (скажем 300px;), сама фирура формируется посредством отступов сверху 1 и 3 блоков (margin-top:200px;), float:left. При размерах экрана меньше скажем 960px фигура распадается, блоки идут рядом:

@media screen and (max-width: 960px) {
div {margin-top:0;}}

И так далее.
Зная ширину и высоту блоков с помошью @media можно сделать с ними всё, что угодно, т.к. вариантов "обрезания" у нас всего три: все столбцы влезают (по-умолчанию), 2 влезают, 1 влезает (можно его под экран подогнать). Для каждого варианта не сложно прописать свои абсолютно любые изменения компоновки.

Answer 3

[Евгений Петров]

Не нужно никаких колонок — берём и делаем, применяя transform и media queries.
Да и margin никакой нам не нужен, если хотим делать адаптивное меню.
Вот так оно выглядит

Answer 4

[Павел Сайк]

Лучше не марджин использовать, а паддинг. Исключит баги, а так да. Решение почти правильное.
1. Три колонки с float:left и равной шириной 33.33%
2. В первом и последнем, внутренний отступ 200 пикселей.
3. При ширине меньшей 960 пикселей с помощью меди квери , убрать у колонок плавающее свойство и сбросить ширину в auto, убрать у первого и последнего отступы.

div {
   float:left;
   width:33.3%
}
div.first,
div.last {
   padding:200px 0 0
}
@media screen and (max-width: 960px) {
div {
   paddint:0;
   float:none;
   width:auto;
}}