css如何將絕對定位的子元素與流體寬度父元素的右側對齊

Question

我試圖將一些背景圖像作爲我的佈局的一部分到我的主內容div的左側和右側。

這是jsfiddle，你可以看到給元素右邊距0px不影響佈局，給它一個左邊距會影響佈局，但由於寬度是可變的，我不知道寬度預先包裝div的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它已經給出了一個新的定位上下文。