2012-01-01 8 views
2

私が話していることの例については、the iPhone pageを参照してください。Appleはどのようにスライドショーを固定位置ボックスの中に配置しますか?

アップルは、ラッパー内のスライドショーを配置:

<div id="wrapper"> 
    <div id="clip"> 
     <!-- Slideshow here --> 
    </div> 

    ... 
</div> 

はここでラッパーのCSSです。

#wrapper { 
    height: 758px; 
    margin: 0 auto; 
    width: 980px; 
} 

しかし、Firebugを通じた文書を検査し、私はそのスライドショーがはるかに大きいですが、それはまだスクロールバーなしで表示されるように管理していることがわかりました。それはどうですか?ここで

は、スライドショーのCSSです:

#clip { 
    background: url("http://images.apple.com/v/iphone/home/b/images/shadow_down.png") no-repeat scroll 50% 0 #FFFFFF; 
    margin: 1px -400px 3px; 
    overflow: hidden; 
    padding-top: 4px; 
    width: 1780px; 
} 

答えて

1

overflow: hiddenは、スクロールバーを非表示になります。

+0

'#clip'に適用される面白いマージンの値はどのように説明できますか? – mc10

+0

ここでは、それらを使ってできることの例を示します:http://jsfiddle.net/XVhyG/2/外側のdivは左にフローティングされていますが、幅はautoに設定されています。つまり、コンテンツに合わせてサイズを調整し、コンテンツのマージンを調整する必要があります。内側のdivには右の余白があり、外側のdivは内側のdivよりも幅が狭くなります。余白をマージン左に変更することも面白いです:http://jsfiddle.net/XVhyG/1/ – Douglas

+0

さて、ありがとう、説明のために。 – mc10

0

hidden値のoverflowプロパティです。

関連する問題