关于实现页面两栏，三栏自适应布局方法总结

左右两栏布局

       实现页面两栏布局最简单的就是左右两栏定宽加浮动，这也是对于新手常见的布局方式，并不是说这样布局有多差劲，缺点一箩筐，凡是要依据实际情况而定，有时候那样布局也是最佳的，简单粗暴。这里主要说下实现两栏自适应布局的几种方式。

      1.左右两栏向左浮动，左边设置相对定位和margin-right负值

       

 #left{
       	  position: relative;
       	  float: left;
       	  margin-right: -100%;
       	  width: 200px;
       	  height: 400px;
       	  background: orange;
       }
#right{
       	 float: left;
       	 width: 100%;
       	 height: 400px;
       	 background-color: blue;
       }

 

<div class="container">
      <div id="left">左边</div>
      <div id="right">右边</div>
</div>

 

 

      2.左栏浮动，右栏触发BFC,有关触发BFC的多种方式，这里就不详细说明了，常见的有，display：inline-block | table-cell | table-caption ; float:left | right;等等....

 

 

 

  #left1{
       	 float: left;
       	 width: 300px;
       	 height: 500px;
       	 background-color: yellow;
       }

   #right1{
       	 overflow: hidden; /*触发BFC方式之一*/
       	 height: 500px;
       	 background-color: #777;
       }

 

实现三栏自适应布局

        这里主要针对圣杯布局和双飞翼布局做简单阐述，，已经了解的童鞋可以略过啦。。。

圣杯布局(名字看起来好厉害的样子...),这种方式的缺点就是受外部最小宽度的限制,原因在父级加了左右padding值，左右两栏相对定位，用了负的left和right.   

  

 .container{
       	   padding-left: 200px;
       	   padding-right: 300px; 
                   min-width:600px;
       	   overflow: hidden; 
       }
 #main-page,#left-page,#right-page{
          float: left;
          height: 300px;
       }
 #main-page{
       	 width: 100%;
       	 min-width: 100px;
       	 background-color: #000;
       }
 #left-page{
       	 position: relative;
       	 margin-left: -100%;
       	 left: -200px;
       	 width: 200px;
       	 background-color: yellow;
       }
#right-page{
       	 position: relative;
       	 margin-left: -300px;
       	 right: -300px;
       	 width: 300px;
       	 background-color: green;
       }

   

 

<div class="container">
        <!-- 中间放置最前面 -->
        <div id="main-page">
        </div>
        <div id="left-page">
        </div>
       <div id="right-page">
       </div>
</div>

 双飞翼布局

   其实这个跟圣杯布局有点类似,也是目前用的比较多的一种,主要区别在于中间主体部分外部包裹了一个div，main-page放主体内容，让后添加左右margin值.

<div class="container clearfix">
        <!-- 中间放置最前面 -->
        <div id="main-wrap">
             <div id="main-page1">
             </div>
        </div>
       <div id="left-page1">
       </div>
       <div id="right-page1">
       </div>
</div>

 

/*双飞翼*/
 #main-wrap,#left-page1,#right-page1{
     float: left;
     height: 300px;
  }
 #main-wrap{
     width: 100%;
 }
#main-page1{
     margin-right: 300px;
     margin-left: 200px;
     height: 100%;
     background-color: red;
}
#left-page1{
     margin-left: -100%;
     width: 200px;
     background-color: yellow;
}
 #right-page1{
     margin-left: -300px;
     width: 300px;
     background-color: green;
}