css - 将内容 float 到网站宽度之外

Question

我有一个 960 像素宽的网站，想在该网站的右侧放置一张图片。

Vimeo 已经在主页上做到了:http://vimeo.com 你可以看到一张折纸鸟的图画超出了网站的宽度 不会导致屏幕出现水平滚动条

他们是如何做到这一点的？!

origami bird Floating outside of Vimeos layout

Answer 1

新答案:

经过进一步询问，似乎一个关键方面是框/图像不会导致水平滚动条，而内容会。这是 vimeo 使用的一个有趣的技巧，而且非常狡猾。

它与 body 上的 min-width 和非直接父级上的 overflow-x:hidden 的组合有关框/图像的。当与 position:absolute 和负数 right 结合使用时，可以达到预期的结果。

HTML:

<div id="wrap">
    <div id="width_wrap">
        <div class="crane"></div>
    </div>
</div>​

CSS:

body
{
    min-width: 960px;
}

#wrap
{
    overflow-x: hidden;
}

#width_wrap {
    position: relative;
    width: 960px;
    height: 400px;
}

.crane
{
    position: absolute;
    width: 200px;
    height: 200px;
    right: -40px;
}

这是一个最小的 fiddle ，带有轮廓，以便您可以看到发生了什么:http://jsfiddle.net/rUj8s/2/ ​

原始答案:

position:absolute 答案很可能有效，但也会使 image/div 脱离文档的正常流程。这可能不是您想要的。

您可能想要的是负的margin-right:

.your_picture {
    margin-right: -30px;
}

或者，也许position:relative，以及负右

.your_picture {
    position: relative;
    right: -30px;
}

或者，最后，position:relative，以及正左

.your_picture {
    position: relative;
    left: 30px;
}

这就是负边距和相对定位存在的原因。将物体相对于它们通常所在的位置移动。