流体布局 – 3列布局,左右列固定.右列在较小的屏幕上流入中间列

前端之家收集整理的这篇文章主要介绍了流体布局 – 3列布局,左右列固定.右列在较小的屏幕上流入中间列前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

HTML设置

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; 
}

问题是中心列需要具有最小宽度,但右列不应移动到中心列.

最佳答案
尝试将中心列的宽度设置为auto而不是定义其最小宽度,

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

猜你在找的CSS相关文章