两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。两者也都采用伪等高布局来实现三列允许一列内容撑开高度,其他两列随之高度增高而改变
圣杯布局:
浮动:搭建完整的布局框架
margin为负值:调整旁边两列的位置,使三列布局到一行
使用相对定位调整两头的位置,使其调整到两头
css:
* {
margin: 0;
padding: 0;
}
body{
min-width:600px;
}
#content{
padding: 0 200px;
overflow: hidden;/*伪等高布局,隐藏溢出*/
}
#header,#footer{
height: 20px;
text-align: center;
border:1px solid blue;
background-color: gray;
}
/*伪等高布局*/
#content #middle,#content #left,#content #right{
padding-bottom: 10000px;
margin-bottom:-10000px;
}
#content #middle{
float: left;
width:100%;