Question

我有一个div包含另一个带图像的div。我需要将这些div放在网上，但是当我添加另一个div时，没有足够的位置让这个div进入一个新的界限。 div的数量取决于db中的图像数量，所以我需要滚动它们。

的CSS：

div#saved_images {
    width: 85%;
    height: 135px;
    overflow-x: scroll;
    overflow-y: hidden;
    border: 2px dashed #000;
    border-radius: 10px;
}

div.saved_image {
    display: inline-block;
    width: 170px;
    height: 120px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
}

感谢您的投入。这是一个jsfiddle：http://jsfiddle.net/remibreton/Sc2L8/

Answer 1

你应该在div＃container中使用“white-space：nowrap”。

div#container {
    width: 85%;
    height: 135px;
    overflow:scroll;
    border: 2px dashed #000;
    border-radius: 10px;
    white-space:nowrap;
}

Answer 2

这听起来像浮动的典型情况。有关浮动here的更多信息：

所以对于前。

div.saved_image { float:left; }

Answer 3

只需将此样式用于容器

.container {
    display: block;
    width: 100%;
    overflow:hidden;
    white-space: normal;
}

div中溢出的div行，滚动而不是新行

3 个答案: