圣杯布局与双飞翼布局
这两种布局非常相似,都是左右固定,中间自适应
圣杯布局:
<style type="text/css">
body{
width: 100%;
height: 100%;
overflow: hidden;
}
.container{
height: 100%;
/* 左右两边容器宽度都是100px,所以容器左右设置100的内边距 */
padding: 0 100px;
}
.center{
width: 100%;
background-color: #008000;
height: 100px;
}
.left{
width: 100px;
background-color: #0000FF;
height: 100px;
}
.right{
width: 100px;
background-color: brown;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
此时的页面是这样的:
第一步:给三个div都加上左浮动,因为center已经占满了第一行的内容区,所以left和right会并排放在第二行。
第二步:让三个div位于同一行上,给left加上
margin-left:-100%;
,它是基于父元素的百分比的,给right加上margin-right:-100px;
第三步:左边的元素需要再忘左移动,给它加上
position: relative;left: -100px;
完成。
双飞翼布局:
<div class="clearfix">
<div class="container">
<div class="center"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
与圣杯布局的区别就是,center与left和right分离了。
<style type="text/css">
body{
width: 100%;
height: 100%;
overflow: hidden;
background-color: #A5A5A5;
}
.container{
width: 100%;
}
.center{
margin: 0 100px;
height: 100px;
background-color: #98FB98;
}
.container,.left,.right{
float: left;
}
.left{
width: 100px;
height: 100px;
background-color: #0000FF;
}
.right{
width: 100px;
height: 100px;
background-color: #00FFFF;
}
</style>
同样地,container有左右内边距,值等同于left与right的宽度,我们也让container、left、right左浮动,注意与圣杯布局的区别就是,left和right是与container同级的,圣杯布局是给center加的左浮动。
接下来,给left加上
margin-left: -100%;
,right加上margin-left: -100px;
计算属性:CALC(有兼容,且性能不好)
<style type="text/css">
/* .container{
width: 100%;
} */
.left,.right{
width: 100px;
height: 100px;
float: left;
background-color: #009DFD;
}
.center{
width: calc(100% - 200px);
height: 100px;
float: left;
background-color: #98FB98;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
注意这一行:width: calc(100% - 200px);
,减号两边必须有空格,100%是屏幕宽度,减去左右两边的宽度,剩余就是center的宽度,三个div要按左中右的顺序写。
flex布局
<style type="text/css">
.container{
display: flex;
/* 左中右排列 项目位于各行之间留有空白的容器内。*/
justify-content: space-between;
height: 100%;
}
.left,.right{
/* 不放大不缩小 */
flex: 0 0 200px;
height: 100px;
background-color: #00FFFF;
}
.center{
flex: 1;
height: 100px;
background-color: #008000;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
定位
<style type="text/css">
.container{
position: relative;
height: 100%;
}
.left,.right{
position: absolute;
top:0;
width:200px;
height: 100px;
background-color: #009DFD;
}
.left{
left: 0;
}
.right{
right: 0;
}
.center{
/* 宽度不写 */
margin: 0 200px;
height: 100px;
background-color: #008000;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
子绝父相,左右两侧通过top、left和right固定位置,中间加margin,宽度自适应。