圣杯布局要实现两边固定，中间自适应，中间部分的代码要放在最上面实现优先加载
第一步：创建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>
517
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
