Question

我想创建一个3列的布局。中心具有固定宽度（例如500px）。侧边栏需要有一个固定的位置，以便它们的内容始终可见。此内容必须靠近中间列浮动。

Here是我到目前为止所提出的。不幸的是，我无法修复侧边栏。代码在下面复制。

HTML：

<div class="wrap">
    <div id="pixelLeft">
        <div id="pixelLeftContent">
            Column 1 has to be fixed, with liquid width.
            It's content needs to be floated to left;
        </div>
    </div>
    <div id="bannerCenter">
    </div>
    <div id="pixelRight">
        <div id="pixelRightContent">
            Column 2 has to be fixed, with liquid width.
            It's content needs to be floated to right;
        </div>
    </div>
</div>
<div style="clear:both;"></div>

CSS：

*{
    margin:0;
    padding:0;
}
#bannerCenter {
    background:#ddd;
    width: 500px;
    float:left;
    height: 1000px;
}
#pixelLeft {
    background:#999;
    width: calc(50% - 250px);
    float:left;
}
#pixedLeftContent {
    width: 50%;
    float:right;
}
#pixelRight {
    background:#999;
    width: calc(50% - 250px);
    float:right;
}
#pixelRightContent {
    width: 50%;
    float:left;
}
#pixelLeft, #pixelRight {
    height: 400px;
}

Answer 1

尝试这样的事情，我不认为css支持％和px在一起......它可以解决你的问题..

像这样修改你的css：

#pixelLeft{
    width: 50%;
    float:left;
    position: relative;

}
#pixelLeftContent{
     background:#999;
     float: right;
     margin-right: 250px;
}

中心div具有固定宽度，固定位置侧边栏

1 个答案: