Question

我一直在努力让一个容器以列的形式显示其内容，并在子项div的数量增加时向侧面扩展而不是向下扩展。我已经尝试了从-vendor-box-orient布局到inline-block的所有内容，似乎没有任何效果。这是用例。

<div class="container">
    <div class="row">
        <div class="item">
        </div>
        <div class="item">
        </div>
    </div>
</div>

.container应该是overflow-x:scroll而.row如果有足够的孩子可以超过.container，而不是让溢出可见。 那么，我怎样才能让.row折叠到其集体孩子的宽度，因为它是垂直的？

用例：JSfiddle

Answer 1

看着你的小提琴演示，我发现了this answer by ThirtyDot（fiddle here）并且适合做同样的事情，让正确流动的内容适合。我并不是完全正确的滚动功能，但让我知道。这应该适用于UL和LI以外的元素，但我还没有修改标记以进行检查。

当然，这会使用奇怪而精彩的display: table-属性。这样做，一定的传统浏览器不会支持它。有关支持的详细信息，请参阅When Can I Use?。

我测试了以下内容：

Firefox 13 - 作品
Chrome最新 - 作品
Opera 11.67 - 作品
IE 8 - 作品
IE 9 - 作品
IE 7 - 不起作用
Safari - 未经测试

因此，如果IE7支持至关重要，那么至少对于该浏览器不起作用。但除非我误解了某些东西，否则它在所有其他方面都很有效。

<强>标记

<div>
    <div class="super-scroller">
        <ul class="horizontal-fit">
            <li class="outer-block"><span class="inner-block"></span></li>
        </ul>
    </div>
</div>

<强> CSS

.super-scroller {
    border: 1px solid green;
    overflow-x: scroll;
    padding: 5px;
    margin: 10px auto;
    width: 90%;
}
.horizontal-fit {
    display: table;
    border: 1px solid blue;
}
.horizontal-fit .outer-block {
    display: table-cell;
}
.horizontal-fit .inner-block {
    display: block;
    border: 1px solid red;
    text-align: center;
    margin: 5px;
    width: 100px;
    height: 100px;
}

http://jsfiddle.net/suJ3d/2/

互动演示：

http://jsfiddle.net/userdude/suJ3d/5/embedded/result/

Answer 2

这是一个有效的例子。红色div在蓝色div内移动。

关键是

overflow-x:scroll;
white-space: nowrap;

外部div上的

和

display:inline-block;

内部div上的

http://jsfiddle.net/WTw2P/2/

Answer 3

如果你不介意使用一点jQuery，这是一个解决方案：http://jsfiddle.net/FNVYE/11/

如何让div折叠成水平内容

3 个答案: