css - 想要稍微重叠的并排 Divs

Question

我环顾四周并没有设法找出如何做到这一点，即使它应该相对容易。我有一个页面我想横向滚动，分成两半，两者都适合窗口大小。这部分很简单，但是我想做的是让右侧 div（在页面加载时隐藏）稍微突出左侧 div 40px 左右 - 这样你就可以看到边缘它。

这是它的基础 - jsFiddle

我希望这个问题是有道理的。position:absolute;到目前为止，我已经尝试了一堆组合，但没有任何乐趣。任何帮助都是极好的。

Answer 1

如果我对您的理解正确，您希望右手 div 可以“窥视”左手 div 的边缘，这样即使它在视口之外，用户也可以发现它。

最简单的方法是在元素上设置一个位置：相对，然后设置一个左值-40px。这将使元素“窥视”。见这里：http: //jsfiddle.net/NUWqE/1/

Answer 2

我可能完全误解了您要查找的内容，但是以下内容是否可以解决您的问题，而不必将 div 与left. 这样就不会混合像素和 %，并且您不必解决#right.

#wrapper {
    width: 200%;
    position:relative;
}

#left {
    width: 45%;
    float: left;
    background-color: red;
}

#right {
    width: 55%;
    background-color: aqua;
    position: absolute;
    right: 0;
}

Answer 3

因此，如果您正在寻找固定宽度的“窥视”，以下答案如何适合：

http://jsfiddle.net/NUWqE/1/

#wrapper {
    width: 200%;
    position:relative;
}

#left {
    float: left;
    width: 50%;
    background-color: red;
    margin-right: -40px;
}

#right {
    float: right;
    width: 50%;
    background-color: aqua;
    position: relative;
    padding-left: 40px;
}

You'll obviously have to adjust the padding of elements inside #right but you would probably be doing that any way depending upon how you'd like to style the content. Hopefully this is what you're looking for.