html - 三个div并排，第三个固定位置

Question

我有三个div，都应该挨着，但第三个需要固定在他的位置。我尝试使用 right:0、float:right 但在这些情况下，第三个 div 不会粘在其他两个上，而是粘在浏览器的右侧，这不是我想要的。我是否必须根据计算的浏览器窗口宽度使用 javascript 移动它，或者是否有 html/css(可能是 Bootstrap )方法来做到这一点？

我有以下 html:

        <div id="sub-container">
            <div id="left">
                {left}
            </div>
            <div id="content">
                {content}
            </div>
            <div id="right">
                {right}
            </div>
        </div>

这样的CSS:

#left {
    float:left;
    top:$topbarHeight;
    width:$leftWidth;
    position:relative;
    margin:2px auto;
    min-height:600px;
    z-index:1;
 }

#right {
    width:$rightWidth;
    height:604px;
    top:$topbarHeight;
    position:fixed;
    margin-left: 10px;
}

#sub-container {
    position:relative;
    float:left;
    max-width:724px;
    margin:auto;
    clear: both;
}

#content {
    position:relative;
    top:$topbarHeight;
    float:left;
    max-width:600px;
}

Answer 1

如果您将右侧 div 的位置更改为绝对位置而不是固定位置，它将移动到相对于子容器而不是浏览器的正确距离。