浮动divs彼此相邻无限

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

如果你让子div显示内联块而不是向左浮动它们,你可以向父级添加一个white-space: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例子