Question

这是我现在所拥有的一个小问题，我试图让它变得一致，所以盒子都适合一行，并且有一个滚动条让人们水平滚动，而不是让盒子做他们现在正在做的事情。 / p>

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

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

示例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

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

Here's an updated fiddle，相关代码已更改：

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

CSS - 自动填充宽度

1 个答案: