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

Question

我有高度：450px和宽度：960px的父div（滑块），它们具有相同高度和宽度的子div（面板）的随机数（此处为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;
}

注意 ：如果我给出width：4800px，我可以实现我想要的； 滑块div设为5x960 = 4800，但我不希望使用此硬编码，因为子div的数量可以是任何数字。

的jsfiddle

Answer 1

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

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

改良的小提琴

Answer 2

这是您想要的吗，您可以使用calc来更改尺寸（以像素为单位）

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