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

Question

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

它们必须在父级 div 内水平排列，这样一次只有一个 div 适合父级 div，也只有 overflow-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;
}

注意：只要付出width:4800px，我就能得到我想要的；滑块 div 为 5x960 = 4800，但我不希望这个硬编码，因为子 div 的数量可以是任何数字。

JSFiddle

Answer 1

是this您想要的，您可以使用calc从像素百分比更改尺寸

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

Answer 2

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

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

modified fiddle

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

Parent div of specific height and width containing number of child div horizontally

html

css

slider