@ZaxapKramer
Больной верстальщик

Можно ли сверстать такое БЕЗ Flexbox?

Здравствуйте. Вот такая вот "штука" должна получиться в итоге (для наглядности растягивайте/сужайте область просмотра):
jsfiddle.net/0na33aea

А вот видео, в котором я показал, как нужно ресайзить:
vimeo.com/216357461:)

Нужно все то же самое (скроллинг у колонок, центрирование, чтобы это все не ломалось при изменении размера окна).

Но БЕЗ Flexbox, если это возможно.
Пытался блоками, пытался таблицами - то одно не скроллится, то другое не центрируется...
Я не прошу вас сверстать это полностью. Было бы очень здорово, но и подсказки хватит (чем, к примеру, что именно и т.п.).

P.S. Я, конечно, понимаю, что Flexbox - это must have и все такое, но... сейчас нет, если возможно обойтись без этого.
P.P.S. Ребята, то ли я вас не понимаю, то ли вы меня... сделал еще и видео.
  • Вопрос задан
  • 901 просмотр
Решения вопроса 1
aliencash
@aliencash
Партизан
Можно на calc() сделать, но кажется вас такой вариант то же не устроит?
https://jsfiddle.net/wfL1dq2o/3/
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
xtala
@xtala
Постигает Дзен
Если я правильно понял речь идет о двух блоках строго центрированных. Такое спокойно можно сделать с помощью подключенного бутстрап`а и его классов. Т.к. колонок по умолчанию в бутстрап 12, то классам надо задать размерность 6, т.е. .col-lg-6, .col-md-6, .col-sm-6 и .col-xs-6, для обоих блоков соответственно. Если размерность нужна меньше 6, то можно задать и по три, но для центровки по центру придется добавить классы push и pull, т.е к блокам нужно добавить классы
.col-lg-push-3, .col-md-push-3, .col-sm-push-3, .col-xs-push-3
к левому блоку с размерностью 3 и
.col-lg-pull-3, .col-md-pull-3, .col-sm-pull-3, .col-xs-pull-3
к правому блоку с размерностью три.
Так много классов надо для обеспечения адекватного отображения блока на всех экранов, от FullHD до мобильных.
UPD. В комментариях речь идет о скролах, но это просто лирика. Просто блокам надо добавить CSS свойство
overflow: scroll;
Ответ написан
GM_pAnda
@GM_pAnda
Бездельник
А кто отменял медиа запросы? Делаешь запрос и на нужном разрешении любые css свойства присваиваешь элементу. И всё
@media only screen and (max-width : 480px){
//Стили этого запроса будут применяться только для экранных устройств с шириной области просмотра не более 480px.
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы