0

如何在 div 内连续排列一组正方形，并在正方形超过 div 宽度时触发水平滚动？

这个 jsfiddle 显示灰色方块在给定窄宽度的情况下错误地包裹。灰色方块应始终位于 1 行，容器 div 应具有水平滚动。

http://jsfiddle.net/anqKb/

我尝试过的事情：

各种position: absolute和overflow: scroll属性。似乎没有任何组合能够获得可滚动容器 div 的预期效果。

4

6 回答 6

2

要使内联块始终保持在一行中，请white-space:nowrap在容器上使用。可选溢出（即当内容宽度超过父宽度时）通过overflow:auto.

这是一个更新的小提琴。

于 2013-10-29T06:40:52.350 回答
0

有关解决方案，请参见http://jsfiddle.net/anqKb/17/。您需要white-space: nowrap;使您的每个盒子都不会包裹并继续向下翻页。

所以我添加了它overflow:scroll;并且.container它有效。

于 2013-10-29T06:54:40.913 回答
0

将css更新为以下

.container {
    width: 100%;
    height: 100px;
    background: rgb(100, 100, 100);
    overflow:auto;
}

希望这可以帮助

于 2013-10-29T06:40:31.707 回答
0

检查这个演示。如下更改您的容器类。

.container {
    width: 100%;
    height: 120px;
    background: rgb(100, 100, 100);
    white-space: nowrap;
    overflow-y:hidden;
    overflow-x:scroll;
}
于 2013-10-29T06:45:08.170 回答
0

添加空白：nowrap 以及为您的容器添加宽度，滚动 x 可见且 y 隐藏

<div class="container">
<div style="width: auto; white-space: nowrap">
    <div class="thumbnail">
    </div>
    <div class="thumbnail">
    </div>
    <div class="thumbnail">
    </div>
    <div class="thumbnail">
    </div>
    <div class="thumbnail">
    </div>
    <div class="thumbnail">
    </div>
    <div class="thumbnail">
    </div>
    <div class="thumbnail">
    </div>
</div>


.container {
width: 500px;
height: 120px;
background: rgb(100, 100, 100);
overflow-x: scroll;
overflow-y: hidden;

}

检查：http: //jsfiddle.net/anqKb/19/

于 2013-10-29T06:58:02.553 回答
0

您可以使用另一个包含正方形并设置固定宽度。

.setWidth {
    width: 740px;
}

www.jsfiddle.net/anqKb/10/

于 2013-10-29T06:46:36.087 回答