1

左右にシフトできるスライダーを作成しようとしています。3 枚のスライドだけを表示したいので、コンテナーの幅を内側の各スライドの幅 * 3 に設定し、 を設定しoverflow:hiddenます。それでは、4 番目のスライドを非表示にすべきではありませんか? その後、コンテナをアニメーション化してマージンを -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; }

レンダリング方法:ここに画像の説明を入力

4

1 に答える 1

0

要素の高さを設定するのはどうですか:

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

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

コンテナーの高さは内部要素に合わせて調整されるため、4 番目の要素が表示されます。

于 2012-09-26T17:46:31.797 に答える