三栏布局要求左右两边盒子宽度固定,中间盒子宽度自适应,盒子的高度都是随内容撑高的。一般中间栏盒子展示的内容较多,需要把中间栏盒子放在左右盒子的前面,使其内容优先加载渲染。
实现三栏布局的常用方法有圣杯布局和双飞翼布局。
圣杯布局
基本结构
将三个盒子放在同一个父级box盒子中,将中间栏盒子middle放在最前面,使其优先加载。
<body>
<div class="box">
<div class="middle item">middle</div>
<div class="left item">left</div>
<div class="right item">right</div>
</div>
</div>
</body>
给middle、left、right三个盒子添加浮动;
设置middle盒子:给中间栏middle盒子设置width=100%即宽度自适应。
设置box盒子:根据左右盒子的宽度给父盒子设置左右padding值,为左右盒子预留位置,给父级盒子设置清除浮动。
设置left盒子:设置margin-left:-100% 使左盒子位置上移,设置相对定位,根据原位置向右平移自身宽度距离即right:200px
设置right盒子:右盒子设置margin-right=盒子宽度的负值
<style>
.box {
/* 给左盒子预留空间 */
padding-left: 200px;
/* 给右盒子预留空间 */
padding-right: 150px;
background-color: aquamarine;
}
.middle {
width: 100%;
/* 这里为了方便展示页面,给middle盒子设置了高度 */
height: 150px;
background-color: pink;
}
.item {
float: left;
}
.left {
position: relative;
/* left: -200px; */
right: 200px;
width: 200px;
margin-left: -100%;
background-color: skyblue;
}
.right {
width: 150px;
/* margin-right:-150px; */
margin-left: -150px;
position: relative;
left: 150px;
background-color: skyblue;
}
</style>
圣杯布局总结
优点:不需要添加DOM节点。
缺点:当middle部分的宽小于left侧边栏宽度就会发生布局混乱。
双飞翼布局
基本结构
双飞翼在圣杯布局的基础上,把中间栏middle盒子嵌套在一个container盒子中,container、left、righ三个盒子为同级盒子。
<body>
<div class="box">
<div class="container item">
<div class="middle">middle</div>
</div>
<div class="left item">left</div>
<div class="right item">right</div>
</div>
</body>
设置浮动:给三个同级盒子(container、left、right)添加浮动;
设置box盒子:给父级box盒子设置清除浮动。
设置container盒子:给container盒子设置width=100%即宽度自适应(中间栏子盒子会继承这个属性,中间栏子盒子不能再设置这个属性,否则margin-right属性不起作用)
设置middle盒子:根据左右盒子的宽度给中间栏middle盒子设置左右margin值,为左右盒子预留位置。
设置left盒子:左盒子设置margin-left:-100% 左盒子位置上移(即移动了container盒子宽度的位置),位于container盒子左侧。
设置right盒子:右盒子设置margin-left=盒子宽度的负值,位于距离container盒子右侧。
<style>
/* 清除浮动 */
.box {
overflow: hidden;
}
/* 给同一级三个盒子添加浮动 */
.item {
float: left;
}
.container {
width: 100%;
background-color: gray;
}
/* 给中间内容添加左右外边距,为左右盒子预留位置 */
.middle {
/* 这里为了方便展示页面,给middle盒子设置了高度 */
height: 200px;
margin-left: 200px;
margin-right: 150px;
background-color: pink;
}
.left {
width: 200px;
/* 参照同级盒子移动,即参照container盒子移动container盒子100%宽度的距离 */
margin-left: -100%;
background-color: skyblue;
}
.right {
width: 150px;
margin-left: -150px;
background-color: rgb(62, 62, 231);
}
</style>
</head>
双飞翼布局总结
双飞翼布局从本质上看也是通过浮动和外边距负值来实现的。
优点:不会像圣杯布局那样变形,css代码更简洁。
缺点:多加了一层DOM节点。