固定布局的几种方式

自适应布局在现在的布局中，很容易遇见，下面是在平时工作中对左右两边固定，中间自适应，且中间内容优先显示布局的一些总结，希望能帮到大家，如果大家有更多更好的意见，欢迎补充！

页面布局如下：

第一种：左右两边绝对定位法,中间用margin-left、margin-right；

#main{margin:0 200px; overflow: hidden;background: #ccc;}

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

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

第二种：中间的盒子绝对定位，左右两边的盒子左右浮动

#main{position: absolute; top:0; left:200px; right:200px;background:#ccc;}

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

#right{float:right;width:200px; background: #0ff;}

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

页面布局如下：

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

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

效果图如下：