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 div的右侧（20px div的顶部约为right）。因此，黑色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 Link

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

CSS - div停靠在另一个div外部包装器上

HTML：

CSS：

2 个答案: