Apple 如何将其幻灯片放置在固定位置的框中？答案

【问题标题】：How does Apple position its slideshow inside a fixed-position box?Apple 如何将其幻灯片放置在固定位置的框中？
【发布时间】：2012-01-01 00:05:14
【问题描述】：

请参阅 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;
}

【问题讨论】：

标签： html css margin fixed-width

【解决方案1】：

overflow: hidden 将隐藏滚动条。

【讨论】：

您能向我解释一下应用于#clip 的有趣边距值是如何工作的吗？
这是一个你可以用它们做的事情的例子：jsfiddle.net/XVhyG/2 外部 div 向左浮动，但宽度设置为自动。这意味着它应该调整自己的大小以适应其内容以及内容的边距。内部 div 的右边距为负数，这导致外部 div 占用的宽度小于内部 div。将 margin-right 更改为 margin-left 也很有趣：jsfiddle.net/XVhyG/1

【解决方案2】：

它是 overflow 属性和 hidden 值。

【讨论】：