一、两列布局
一列定宽浮动，一列margin或者一列绝对定位，另一列设置margin，代码如下：
1.定宽浮动
.left{
float: left;
width: 200px;
background-color: #222;
height: 300px;
color: #fff;
}
.right{
margin-left: 200px; /*左边距200px*/
height: 300px;
background-color: #999;
color: #fff;
}
<div class="left">定宽</div>
<div class="right">自适应宽度</div>
2.绝对定位
.left{
position:absolute;
top: 0;
left: 0;
width: 200px;
background-color: #222;
height: 300px;
color: #fff;
}
.right{
margin-left: 200px; /*左边距200px*/
height: 300px;
background-color: #999;
color: #fff;
}
image.png
二、三列布局
三列布局的特别的是两列浮动定宽，剩下一列margin两列的宽度，比如左右定宽，中间自适应，这个时候需要注意文档顺序，代码如下：
.left{
float: left;
width: 200px;
background-color: #222;
height: 300px;
color: #fff;
}
.right{
float: right;
width: 100px;
height: 300px;
background-color: #999;
color: #fff;
}
.middle{
margin: 0 100px 0 200px;
height: 300px;
background-color: #555;
color: #fff;
}
<div class="left">左定宽</div>
<div class="right">右宽度</div>
<div class="middle">中间自适应</div>
image.png
注：这种布局需要注意文档的顺序，也可以用绝对定位来决定两列，这时就不需要注意文档顺序了
