9

我有一个使用引导程序构建的站点，我想使用 jquery.dragscroll 插件创建一个带有可滑动标题的表，但保留流体网格内置引导程序。

所以我想创建表的标题，我正在使用这个 HTML：

<div class="row-fluid">
    <div class="span12">
        <div style="overflow:hidden;width:90%;">
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
        </div>
    </div>
</div>

代码在这里：http: //jsfiddle.net/cVfzJ/1/

正如我们在 Fiddle 中看到的那样，所有 div 都在两行上可见，我的目标是将所有 div 放在一行上（隐藏溢出的 div）

我希望问题很清楚

4

1 回答 1

24

你应该有一个容器来容纳所有<div>等于widthall 的总和<div>。那么这个容器的父级必须有overflow: auto.

如果你不知道渲染前的总宽度，你可以使用 JS 来计算它。

继续你的例子：

<div class="row-fluid">
    <div class="span12">

        <!-- Changed from `hidden` to `auto`. -->
        <div style="overflow:auto;width:90%;">

            <!-- This is the div that does the trick: -->
            <div style="width:1200px;">

            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>

            </div>

        </div>
    </div>
</div>
于 2013-05-27T13:17:44.297 回答