css 左右列固定

Question

我正在处理一个包含 3 列的网页。我想卡住左 n 右列。我尝试设置为 position:fixed 首先在左栏上，但其他所有 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>