Question

我有一个div

display:inline-block;
postion:relative;

在

中使用

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

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

3 个答案:

答案 0 :(得分：12)

答案 1 :(得分：0)

答案 2 :(得分：-1)

Answer 1

您只需在任一div上设置white-space: nowrap（该属性是继承的）。 (Source)

Sidenote ：内部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

Ray Z！

溢出很重要。所以为了把你的CSS写成

overflow:"hidden"

你应该使用

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

Answer 3

将宽度和overflow-x设置为内部div的自动

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

水平展开div不垂直

3 个答案: