布局

 自适应布局在现在的布局中，很容易遇见，下面是在平时工作中对左边固定，右边自适应及左边自适应，右边固定布局的几种方法的一些总结，希望能帮到大家，如果大家有更多更好的意见，欢迎补充！

页面布局如下：

一、左边固定，右边自适应的布局

1. 左边左浮动，右边加个overflow:hidden;
   

#lt{ 
    float: left;
    width: 200px; 
    background: #ff0;
} 

#rt{ 
    overflow: hidden; 
    background: #f0f;
}

2. 左边左浮动，右边加个margin-left;   

#lt{ 
    float: left; 
    width: 200px; 
    background: #ff0;
}

#rt{ 
    margin-left: 200px; 
    background: #f0f;
}

3. 左边绝对定位，右边加个margin-left;  

#lt{ 
    position: absolute; 
    top: 0;  
    left: 0; 
    width: 200px; 
    background: #ff0;
}

#rt{ 
    margin-left: 200px;
     background: #f0f;
}

4. 左右两边绝对定位，右边加个width,top,left,right  

#lt{ 
    position: absolute; 
    top:0 ; left:0 ;
    width: 200px; 
    background: #ff0;
}

#rt{ 
    position: absolute; 
    top: 0 ; 
    left: 200px; 
    width: 100% ; 
    rigth: 0;
    background: #f0f;
}

效果图如下：

 

二、右边固定，左边自适应的布局

 

1. 左边左浮动，margin-left负值,右边右浮动;  

#lt{
    float: left; 
    width: 100%;
    background: #00f;
    margin-right: -200px;
}

#rt{
    float: right; 
    width: 200px;
    background: #ff0;
}

2. 右边绝对定位，左边margin-right;  

#lt{
    margin-right: 200px;
    background: #00f;
}

#rt{ 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 200px;
    background: #ff0;
}

3. 左右两边绝对定位，左边加个width,top,left,right   

#lt{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    rigth: 0; 
    width: 100% ; 
    background: #f0f;
}

#rt{
    position: absolute; 
    top: 0; 
    left: 200px;
    width: 200px; 
    background: #ff0;
}

效果图如下：

 

上面的方法在各浏览器的测试中，都能兼容！