圣杯布局要实现两边固定,中间自适应,中间部分的代码要放在最上面实现优先加载
第一步:创建middle,left,right,及包裹它们的父盒子content
第二步
接下来要将left放在middle左边,right放在middle的右边,
将left,middle,设置为左浮动
将right设置为又浮动
由于浮动的原理是谁先浮动的谁就是在最顶端的,且middle已经设置了width为100%了,后浮动的元素只能在他下方,所以出现了如下图:
第三步
借着浮动的原理我们可以先将left设置为margin-left为-100%,
会发现它移动上去了,但是middle部分被遮住了。
第四步
此时我要将left,middle,right外面套的盒子设置左右padding为left和right的宽度,然后通过偏移过去形成圣杯布局
第五步
然后将left左移content左内边距的距离,由于你元素浮动过了再给你设置left,right,top,bottom是不生效的,有CSS基础的知道,所以要给你设置一个定位,用absolute会破坏float布局,只能用relative相对定位来解决
相对定位:设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。
左边已经过来了,右边的原理也是一样的
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
min-width: 750px;
}
* {
margin: 0;
padding: 0;
}
.content{
padding: 0 200px;
}
.middle {
position: relative;
float: left;
background-color: aquamarine;
height: 100px;
width: 100%;
}
.left {
position: relative;
float: left;
background-color: rgb(223, 243, 187);
height: 100px;
width: 200px;
margin-left: -100%;
right: 200px;
}
.right {
position: relative;
float: right;
background-color: rgb(223, 243, 187);
height: 100px;
width: 200px;
margin-right: -200px;
}
</style>
</head>
<body>
<div class="content">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>