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

Question

我有高度:450px 和宽度:960px 的父 div(slider)，它有相同高度和宽度的子 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;
}

注意:如果我给 width:4800px; 我可以达到我想要的效果； slider div 为 5x960 = 4800，但我不希望这个硬编码，因为子 div 的数量可以是任何数字。

JSFiddle

Answer 1

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

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

modified fiddle