CSS常见布局

左列定宽，右列自适应

float + margin

.left{float:left;width:100px;}
.right{margin-left:100px;}

position + margin

.left{position:absolute;width:100px;}
.right{margin-left:100px;}

table

.parent{display:table;

table-layout:fixed;width:100%;}
.left{width:100px;}
.right,.left{display:table-cell;}

flex

.parent{  display: -webkit-flex;
  display: flex;}
.left{width:100px;}
.right{-webkit-flex: 1;flex: 1;}

右列定宽，左列自适应

float + margin
.left{margin-right:-100px;width:100%;float:left;}
.right{float:right;width:100px;}

table

.parent{display:table;

table-layout:fixed;width:100%;}
.right{width:100px;}
.right,.left{display:table-cell;}

flex

.parent{  display: -webkit-flex;
  display: flex;}
.left{-webkit-flex: 1;flex: 1;}
.right{width:100px;}

position + margin

.left{margin-right:100px;}
.right{position:absolute;

width:100px;}

两列固定宽度

float

.left{float:left;}
.right{float:right;}

.clearfix{

visibility: hidden;
display: block;

content: "";

clear: both;
height: 0;}

多列等分布局

float

.parent{margin-left:-20px}

/*假设列之间的间距为20px*/
.column{float:left;width:25%;

padding-left:20px;

box-sizing:border-box;}

table

.parent-fix{margin-left:-20px;}
.parent{display:table;table-layout:fixed;width:100%;}
.column{display:table-cell;padding-left:20px;}

flex

.parent{display:flex;}
.column{flex:1;}
.column+.column{margin-left:20px;}