CSS - 自动填充宽度

Question

这是我现在所拥有的js小提琴，我试图让它成为所有盒子都适合一行，并且有一个滚动条让人们水平滚动而不是让盒子做他们现在正在做的事情。

此外，如果任何人都可以让类面板体填充100％到页面的高度，那就太棒了; D

这是使用Bootstrap 3.0.2，所以从那里拉出面板。

http://jsfiddle.net/Y55af/

示例css：

.mainContent{
    padding:20px;
}
.workplace_outter{
    width:100%;
    overflow-x:scroll;
}
.workplace_inner{
    width:2000px;
}
.workplace_outter .panel{
    width:300px;
    margin-right:5px;
    display:inline-block;
}

示例HTML：

<div class="mainContent">
    <div class="workplace_outter">
        <div class="workplace_inner">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Item
                </div>
                <div class="panel-body">
                    Item Body....
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

我不太明白你的意思是“让盒子的白色部分垂直填充”，但由于面板已经是内联块元素，你可以用white-space: nowrap替换容器上的width规格white-space: nowrap将阻止任何inline或inline-block元素包装到第二行。

这是一个更新的小提琴 ，相关代码已更改：

.workplace_inner{
/*  width:2000px; (don't need anymore) */
    white-space: nowrap;
}