css实现两栏布局的三种方法介绍（代码）

1、浮动布局

左侧栏固定宽度向左浮动，右侧主要内容则用margin-left留出左侧栏的宽度，默认宽度为auto，自动填满剩下的宽度。

<div class="one"></div>
 
<div class="two"></div>

 .one{
 float: left;
 width: 200px;
 height: 200px;
 background: darkcyan
 }
 .two{
 margin-left: 200px;
 height: 200px;
 background: salmon
 }

右侧固定宽度，左侧自适应则是同理，只要将固定栏右浮动，使用margin-right空出其宽度即可。

 <div class="one"></div>
 <div class="two"></div>

 .one{
 float: right;
 width: 200px;
 height: 200px;
 background: darkcyan
 }
 .two{
 margin-right: 200px;
 height: 200px;
 background: salmon
 }

2、浮动布局+负外边距（双飞翼布局的两栏版）

 <div class="aside"></div>
 <div class="main">
 <div class="content"></div>
 </div>

 .aside{
 width: 300px;
 height: 100px;
 background:darkcyan;
 margin-right: -100%;
 float: left;
 }
 .main{
 width: 100%;
 float: left;
 }
 .content{
 margin-left: 300px;
 background: salmon;
 }

3、绝对定位

 <div class="left"></div>
 <div class="right"></div>

 .left{
 width: 200px;
 height: 200px;
 position: absolute;
 background: darkcyan
 }
 .right{
 height: 200px;
 margin-left:200px; 
 background: salmon;
 }