双飞翼HTML圣杯布局,双飞翼布局，圣杯布局

1.双飞翼布局

.container{

float:left;

width:100%;

}

.left{

background:red;

float:left;

margin-left:-100%;

width:300px;

height:100px;

}

.right{

background:yellow;

float:left;

margin-left:-300px;

width:300px;

height:100px;

}

.center{

background: blue;

margin-left:300px;

margin-right:300px;

height: 100px;

}

2.圣杯布局

.container{

margin-left:300px;

margin-right:300px;

}

.left{

background:red;

position:relative;

float:left;

width:300px;

height:100px;

margin-left:-100%;

left:-300px;

}

.right{

background:yellow;

position:relative;

float:left;

margin-left:-300px;

right:-300px;

width:300px;

height:100px;

}

.center{

float:left;

background: blue;

width:100%;

height: 100px;

}

打开App，阅读手记