包含水平子div數的特定高度和寬度的父div

Question

我有父div（滑塊）的高度：450px和寬度：960px，其中有子div（pannel）的隨機數（這裏讓我們考慮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; 
} 

注意：我能實現我想要什麼，如果我給寬度：4800px;滑塊div爲5x960 = 4800，但我不想這個硬編碼，因爲子div的數量可以是任何數字。

JSFiddle

Answer 1

改變尺寸的：

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

modified fiddle

Answer 2

是this你願意，你可以使用calc因爲你使用inline-block元素您可以通過用戶在滑塊white-space: nowrap;屬性從百分比由像素

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