CSS:三栏布局之圣杯布局
2018-05-02 本文已影响0人
肆意咯咯咯
1.圣杯布局
（1）父元素包含左中右三个盒子。中间盒子要优先渲染，所以要先写中间盒子 ；注意：父元素清浮动：overflow:hidden;
（2）三个盒子分别左浮动；
（3）中间盒子宽度为100%；
（4）左边盒子定宽，采用相对定位，设置left:-左元素宽度；设置margin-left:-100%;
（5）右边盒子定宽，采用相对定位，设置right:-右元素宽度；设置margin-left:-右盒子宽度;
（6）父元素设置左右padding给左右盒子留位置；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body,html{
width:100%;
height:100%;
}
.parent{
height:100%;
padding:0 200px;
overflow: hidden;
}
.left{
width:200px;
height:100%;
background-color:lightgrey;
position:relative;
left:-200px;
float:left;
margin-left:-100%;
}
.right{
width:200px;
height:100%;
background-color:lightgrey;
position:relative;
right:-200px;
float:left;
margin-left:-200px;
}
.center{
width:100%;
height:100%;
float:left;
/*position:relative;*/
background-color:lightsalmon;
}
</style>
</head>
<body>
<div class="parent">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
