左边固定，右边自适应及左边自适应，右边固定布局的几种方法

左边固定，右边自适应及左边自适应，右边固定布局的几种方法

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

 

页面布局如下：

 

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

 

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

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

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

 

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

 

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

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

 

 

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

 

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

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

 

 

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

 

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

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

 

 

效果图如下：

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

 

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

 

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

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

 

 

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

 

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

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

 

 

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

 

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

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

 

 

效果图如下：