Question

我有这个问题：

＆＃13;

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

＆＃13;

<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>

＆＃13;

提供参考：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 example

浮动divs无限期地彼此相邻

1 个答案: