溢出隐藏不会在构建滑块时隐藏溢出

Question

我正在尝试创建一个可以左右移动的滑块。我只想要显示3张幻灯片，所以我将容器的宽度设置为每个内部幻灯片的宽度* 3并设置overflow:hidden。那不应该隐藏第四张幻灯片吗？然后我可以让容器动画显示-110px的边距，因此幻灯片2-4显示。

http://jsbin.com/welcome/27336/edit

HTML：

<div class="container">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
  <div class="inner">shouldn't be here</div>
</div>

CSS：

.container { width: 330px; overflow:hidden; background:#e6e6e6; }
.inner { width: 110px; background: orange; float:left; }

呈现方式：

Answer 1

如何设置元素的高度：

.container { 
    width: 330px; 
    overflow:hidden; 
    background:#e6e6e6; 
    height:20px 
}

.inner { 
    width: 110px; 
    background: orange; 
    float:left; 
    height: 20px;
}

容器的高度随内部元素调整，这就是为什么你会看到第四个元素