html聖杯布局,聖杯布局方法執行個體

聖杯布局

body,div{margin: 0;padding: 0;}

.main {

background:red;

width:100%;

float:left;

}

.left {

background:yellow;

width:300px;

float:left;

margin-left:-300px;

}

.right {

background: green;

width:250px;

float:left;

margin-right:-250px;

}

#head, #footer {

height:100px;

background: #666;

color: #eee;

text-align: center;

clear:both;

}

#content{

padding-left:300px;

padding-right:250px;

}

header

lefterretr

main

right

footer

聖杯布局它的目标是左右兩欄定寬，中間那一行流式