圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应。
圣杯布局
整体布局,main 为外部容器,容器内 middle、left、right 依次排列(注意排列顺序)。
- 设置外部容器
.main {padding: 0 200px;}
; - 左中右部分,均设置
float: left;
; - middle 部分
.middle {width: 100%;}
占满; - 设置
.left{margin-left: -100%;}
使其占住 middle 的左侧; - 此时 left 覆盖了 middle 的部分,再设置
.left{position: relative;right: 200px;width: 200px;}
; - right 部分设置
.right{margin-right: -200px;}
即可。
.main {
padding: 0 200px 0 200px;
height: 300px;
}
.middle {
float: left;
width: 100%;
height: 300px;
background: blue;
}
.left {
position: relative;
right: 200px;
float: left;
width: 200px;
height: 300px;
background: red;
margin-left: -100%;
}
.right {
float: left;
width: 200px;
height: 300px;
background: yellow;
margin-right: -200px;
}
<div class="main">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>