1

我整天都在尝试让一个容器以列的形式显示其内容，并在 children 的数量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:scrollwhile.row应该超过，而不是让溢出可见。那么，如果它是垂直的，我怎样才能折叠到它的集体孩子的宽度呢？.container.row

用例：JSfiddle

4

2 回答 2

3

看着你的小提琴演示，我找到了 ThirtyDot 的这个答案（这里的小提琴），并适应了对正确流动的内容做同样的事情来正确拟合。我并不完全了解滚动功能，但请告诉我。UL这应该适用于除and以外的元素LI，但我尚未修改标记以进行检查。

当然，这使用了奇怪而奇妙的display: table-属性。这样做，某些旧版浏览器必然不支持它。看看我什么时候可以使用？有关支持的详细信息。

我测试了以下内容：

Firefox 13 - Works
Chrome 最新- Works
Opera 11.67 - Works
IE 8 - Works
IE 9 - Works
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/

于 2012-06-23T04:13:33.807 回答
0

这是一个工作示例。红色 div 在蓝色 div 内移动。

关键是 

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

在外部 div 和

display:inline-block;

在内部 div

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

于 2012-06-23T03:23:12.333 回答