Question

我试图将一些属于我的布局的背景图片放在我的主要内容div的左侧和右侧。

这是jsfiddle，因为你可以看到给元素一个0px的右边距并不会影响布局，给它一个左边距会影响布局，但由于宽度是可变的，我可以＆＃39;事先知道包装器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，因此它已经提供了新的定位上下文。

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

1 个答案: