CSS 左右列固定

Question

CSS 左右列固定

css

3

我正在制作一个三列网页。我想要固定左右两列，但是尝试将左侧列的位置设置为"fixed"时，其他所有div都会向左崩溃。

有什么好的解决办法吗？

- chrizonline

2个回答

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>

- Bazzz

说实话，我认为我是第一个回答你问题的人。但如果你发现T. Stone的回答更适合你的情况，那他的回答就更好。 - Bazzz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T. Stone · Accepted Answer

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>