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

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

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

modified fiddle

Answer 2

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

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

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

2 个答案: