具有特定高度和宽度的父div，水平包含子div的数量

Question

我有高度为450px和宽度为960px的父div（滑块），它们有相同高度和宽度的子div（pannel）的随机数（这里让我们考虑5）。

它们必须水平排列在父div内部，这样一次只能有一个div适合父div，也只能溢出-x:auto；没有垂直滚动条。

这就是我目前所拥有的：

HTML

<div class="slider_holder">
    <div class="slider">
        <span class="pannel"> </span>
        <span class="pannel"> </span>
        <span class="pannel"> </span>
        <span class="pannel"> </span>
        <span class="pannel"> </span>
    </div>
</div>

CSS

html, body, *
{
    margin:0px;
    width:100%;
}

.slider_holder
{
margin-left:auto;
margin-right:auto;
display:block;
position:relative;
top:100px;
width:960px;
height:450px;
background:#eee;
overflow:auto;
}
.slider
{
width:auto;
height:100%;
}
.pannel
{
display:inline-block;
float:left;
width:960px;
height:100%;
border:1px solid red;
}

注意：如果我给宽度：4800px，我可以实现我想要的；滑块div为5x960=4800，但我不想硬编码，因为子div的数量可以是任何数字。

JSFiddle

Answer 1

因为您使用的是inline-block元素您可以在滑块上使用white-space: nowrap;属性：

.slider
{
width:auto;
height:100%;
white-space: nowrap;
}

修改后的fiddle

Answer 2

这就是您想要的吗，您可以使用calc更改按像素百分比的维度

.pannel {
  display:inline-block;
  float:left;
  width:calc(100% - 2px);
  height:calc(100% - 2px);
  border:1px solid red;
}