поплавок дивы рядом друг с другом на неопределенный срок

Question

У меня есть эта проблема:

.container { 
 
    height: 500px; 
 
} 
 

 
.tile { 
 
    background-color: green; 
 
    margin-right: 20px; 
 
    margin-bottom: 10px; 
 
    float: left; 
 
    height: 100%; 
 
    width: 100px; 
 
}

<div class="container"> 
 
    <div class="tile"></div> 
 
    <div class="tile"></div> 
 
    <div class="tile"></div> 
 
    <div class="tile"></div> 
 
    <div class="tile"></div> 
 
    <div class="tile"></div> 
 
    <div class="tile"></div> 
 
    <div class="tile"></div> 
 
    <div class="tile"></div> 
 
</div>

скрипка для справки: http://jsfiddle.net/dv4zqkw5/

Что мне нужно для отображения каждого плитки рядом друг Другие. Проблема в том, что может быть 5 плиток или 20 (потому что они динамически загружаются). Я пытаюсь получить что-то похожее на то, как работает меню Windows 8, но я не могу заставить панель прокрутки отображаться и горизонтально прокручиваться.

Я пробовал:

overflow-y: hidden; 

, но это не сработало.

Любая помощь была бы принята с благодарностью.

Answer 1

Если вы сделаете нижестоящую экранную диву встроенного блока вместо плавающих их влево, вы можете добавить Пробельный: Nowrap править родитель и получить то, что вы хотите:

.container { 
    height: 500px; 
    white-space:nowrap; 
} 
.tile { 
    background-color: green; 
    margin-right: 20px; 
    margin-bottom: 10px; 
    display:inline-block; 
    height: 100%; 
    width: 100px; 
} 

jsFiddle example