Как реализовать горизонтальный скролл?

Question

[Антон]

Есть блок высотой 100vh, а в нем блоки с разной высотой и шириной 100%, сколько вмещается в экран по вертикали. Задача: как сделать так, чтобы невмещающиеся блоки уходили вправо, чтобы их потом через javascript можно было показать? Пробовал через css3 columns, не получилось.

Answer 1

[Pretor DH]

В примере JSFiddle:

• реализован переход между страницами через меню без JavaScript;
  
• можно переключить галерею в режим справа на лево.
  

Основное в примере это:

.container { 
    position: absolute;
    top: 0; left: 0;
    bottom: 0; right: 0;
    overflow-x: scroll;
    
    -ms-writing-mode: tb-lr;
    -webkit-writing-mode: vertical-lr;
    -moz-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    writing-mode: vertical-lr;    
}
.items {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;

    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
    -moz-writing-mode: horizontal-tb;
    -ms-writing-mode: horizontal-tb;				
    writing-mode: horizontal-tb; 
}

Comments

[Антон]

дело в том, что надо на один экран не один блок, а столько, сколько влезет

[Pretor DH]

Ну так убери width. Смотри в примере уже поправил...

[Антон]

Pretor DH: столько, сколько влезет по вертикали

[Pretor DH]

Я понял типа горизонтальный масонри... Уже смотри в примере...

[Антон]

Pretor DH: спасибо, подошло