css - 水平扩展div而不是垂直扩展

Question

我有一个 div

display:inline-block;
postion:relative;

在一个div里面

display:block;
width:348px;
overflow:hidden;

当内部 div 的内容溢出时，我希望它们展开horizontally，而不是vertically. 内部 div 的内容由照片的缩略图组成

Answer 1

您只需要white-space: nowrap在其中一个 div 上进行设置（该属性是继承的）。（资源）

旁注：内部 div 不是必需的。

演示：JSFiddle

HTML

<div class="container">
    <div>
        <!-- Thumbnails -->
    </div>
</div>

CSS

.container {
    display: block;
    width: 348px;
    overflow: hidden;
    white-space: nowrap;
}

.container div {
    position: relative;
    display: inline-block;
}

Answer 2

雷Z！

溢出确实很重要。所以为了写你的css

overflow:"hidden"

你应该使用

overflow-x: hidden;
overflow-y: scroll;

Answer 3

将内部 div 的 width 和 overflow-x 设置为 auto

    <div id = "outer">
     <div id = "inner"></div>
    </div>

#outer{
width: 400px;
height: 300px;
border: red thin dotted;
}

#inner{
margin: 15px;
height: 280px;
width: auto;
border: green thin solid;
overflow-x: auto;
}

这是小提琴http://jsfiddle.net/jgrgb/