3列布局，左右列固定。在较小的屏幕上，右栏流入中心栏答案

【问题标题】：3 column layout with fixed left and right column. Right column flows into center column on smaller screens3列布局，左右列固定。在较小的屏幕上，右栏流入中心栏
【发布时间】：2011-07-28 01:53:40
【问题描述】：

HTML 设置

<div id="fixed-wrapper">
<div id="header">
        <h1>Site Name</h1>
</div>
<div id="leftCol"></div>
<div id="centerCol"></div>
<div id="rightCol"></div>

CSS：

#fixed-wrapper{
    min-width: 1264px;
}
#header{
    width: 100%;
    height: 75px;   
    text-align: center;
}
#header h1 
{
    line-height: 75px;   
}
 #centerCol {
    margin-left: 310px;
    margin-right: 360px;
    height: 100%;
    min-width: 604px;
}
#rightCol {
    width: 285px;
    height: auto;
    position: absolute;
    top: 75px;
    right: 0;
    margin-right: 75px;
}
#leftCol {
    width: 235px;
    height: auto;
    position: absolute;
    top: 75px;
    left: 0;
    margin-left: 75px; 
}

问题是中心列需要有一个最小宽度，但右列不应该移动到中心列。

【问题讨论】：

标签： fluid-layout css

【解决方案1】：

尝试将中心列的宽度设置为自动，而不是定义其最小宽度，

 #centerCol {
    margin-left: 310px;
    margin-right: 360px;
    height: 100%;
    width: auto;
}

【讨论】：

没有必要定义它（最小宽度），因为我怀疑你想要固定两侧（左/右）和一个流体中心 div 列。
我想要一个流畅的中心 div，但我想限制中心的大小。
如果需要，可以在固定包装器上设置min-width，但不要在中心 div 上。

【解决方案2】：

使#fixed-wrapper 相对定位，以便#leftCol 和#rightCol 相对于它绝对定位，而不是相对于文档正文。

#fixed-wrapper{
    min-width: 1264px;
    position: relative;
}

jsFiddle example

【讨论】：

这行得通，但是太付的解决方案效果更好，这种方法似乎与我的一个利润冲突。