css - CSS - div 停靠在包装器之外的另一个 div

Question

我有两个 div，都向左浮动。“左” div 将是页面的左列。“正确” div 将是主要内容。

HTML：

<div id="wrapper">
    <div id="content">
        <div id="left">
        </div>

        <div id="right">
        </div>

        <div id="docked_div">
        </div>
    </div>
</div>

CSS：

#wrapper {
    margin: 0 auto;
    margin-top: 35px;
    width: 1005px;
}

#content {
    overflow: hidden;
    background-color: white;
}

#left {
    float: left;
    width: 250px;
    background: red;
}

#right {
    float: left;
    background: blue;
}

这工作正常。现在我有了第三个名为docked_div. 这个 div 应该在包装器之外并且在 div 的右侧right（大约20px从rightdiv 的顶部开始）。所以，黑色的 div 现在在左侧，但它应该在右侧和包装器之外。

我试图以不同的方式将位置设置为相对或绝对，但我无法得到我想要的结果。我对创建布局没有太多的 CSS 知识，因此，我将不胜感激任何建议和指导。

这是完整的例子：http: //jsfiddle.net/TA7Rh/

Answer 1

尝试这个。

#docked_div {
    background-size: 100% auto;
    height: 212px;
    position: absolute;
    right: 0;
    width: 53px;
}

这将使 div 位于主 div 的右侧。希望这可以帮助。

Answer 2

我认为这会奏效

#wrapper {
    margin: 0 auto;
    margin-top: 35px;
    width: 1005px;
    position: relative;
}

#docked_div {
    /*background: url(../images/mazais_fons.png);*/
    background-size: 100%;
    width: 53px;
    height: 212px;
    position: absolute;
    right:-60px;
}

jsFiddle 链接

根据您的要求更改正确的位置。