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

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