html - css 如何将绝对定位的子元素对齐到流体宽度父元素的右侧

Question

我正在尝试将一些作为布局一部分的背景图片放在主要内容 div 的左侧和右侧。

这是 jsfiddle ，正如您所看到的，给元素一个 0px 的右边距不会影响布局，给它一个左边距会影响布局，但由于宽度是可变的，我无法事先知道包装 div 的宽度(不使用我不想使用的 Javascript)。

CSS

 #wrapper {
    position: fixed;
    width: 85%;
    margin: 0 auto;
    padding: 0px 30px 0px 30px;
    overflow: auto;
    background-color: grey;
}

#leftLayoutCol {
    position: absolute;
    height: 100%;
    width: 30px;
    margin-left: -30px;
    background-color: green;
}

#rightLayoutCol {
    position: absolute;
    height: 100%;
    width: 30px;
    background-color: lightgreen;
    margin-right: 0px;
}

#main {
   padding: 0px 50px 0px 50px;
   background-color: lightgrey;
}

html

<div id="wrapper">
    <div id="leftLayoutCol">
    </div>
    <div id="rightLayoutCol">
    </div>
    <div id="main">
        <h1>TEST</h1>
        <h1>TEST</h1>
        <h1>TEST</h1>
        <h1>TEST</h1>
        <h1>TEST</h1>
    </div>
</div>

有什么建议吗？

谢谢。

Answer 1

添加以下属性。

#rightLayoutCol {
    right: 0;
}

因为 #wrapper 是 position: fixed 它已经提供了一个新的定位上下文。