我正在尝试创建一个可以左右移动的滑块。我只想显示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; }
它的渲染方式:
发布于 2012-09-27 01:46:32
如何设置元素的高度:
.container {
width: 330px;
overflow:hidden;
background:#e6e6e6;
height:20px
}
.inner {
width: 110px;
background: orange;
float:left;
height: 20px;
}
容器的高度随内部元素调整,这就是为什么您会看到第四个元素
https://stackoverflow.com/questions/12607339
复制相似问题