css左右列固定

Question

我正在处理一个 3 列网页。我想冻结左 n 右列。我尝试设置为位置：首先固定在左列，但其他 div 的所有内容都向左崩溃。

任何的想法？？

Answer 1

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

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

#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>