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;
}