Question

我在3栏目的网页上工作。我想冻结左右列。我尝试设置到位置：首先固定在左列，但其他所有div只是向左崩溃。

任何想法？

Answer 1

position:fixed将元素从元素的正常“流”中取出。我通常通过将中间列的margin-left设置为等于左列的宽度加上所需的装订线来避免这种情况。例如，如果左列为250px且装订线为25px，则中间列的margin-left为275px。

示例代码（这会使中间列的流体保持宽度）：

#wrapper { position: relative; min-width: 800px; max-width: 1000px; margin-left: auto; margin-right: auto; }
#left-col { position: absolute; top: 0; left: 0; width: 250px; }
#right-col { position: absolute; top: 0; right: 0; width: 250px; }
#middle-col { position: relative; margin-left: 275px; min-width: 250px; max-width: 450px; }

<div id="wrapper">
    <div id="left-col"> left </div>
    <div id="middle-col"> middle </div>
    <div id="right-col"> right </div>
</div>

Answer 2

您需要在中心div上设置边距以保留其他两个边距。

这是一个jsfiddle：http://jsfiddle.net/pfxxL/

#left {
    width: 100px;
    position: fixed;
    top: 0;
    left: 0;
    background: red;
}

#right {
    width: 100px;
    position: fixed;
    top: 0;
    right: 0;
    background: blue;
}

#center {
    margin-left: 100px;
    margin-right: 100px;
    height: 750px;
    background: green;
}

<div id="left">
    left left<br/>
    left left<br/>
    left left<br/>
</div>
<div id="center">
    center
</div>
<div id="right">
    right right<br/>
    right right<br/>
    right right<br/>
</div>

css左右栏固定

2 个答案: