圣杯布局
1.设置基本样式
为了高度保持一致给left main right都加上min-height:130px。
2.圣杯布局是一种相对布局，首先设置父元素container的位置：
实现效果是左右分别空出200px和300px区域，效果如图：
3.将主体部分的三个子元素都设置左浮动
出现了如下情况，怎么办，别着急慢慢来：
4.设置main宽度为width:100%,让其单独占满一行
5.设置left和right 负的外边距
我们的目标是让left、main、right依次并排，但是上图中left和right都是位于下一行，这里的技巧就是使用负的margin-left:
负的margin-left会让元素沿文档流向左移动，如果负的数值比较大就会一直移动到上一行。关于负的margin的应用也是博大精深，这里肯定是不能详细介绍了。
设置left部分的margin-left为-100%,就会使left向左移动一整个行的宽度，由于left左边是父元素的边框，所以left继续跳到上一行左移，一直移动到上一行的开头，并覆盖了main部分（仔细观察下图，你会发现main里面的字“main”不见了，因为被left遮住了），left上移过后，right就会处于上一行的开头位置，这时再设置right部分margin-left为负的宽度，right就会左移到上一行的末尾。 
6.接下来只要把left和right分别移动到这两个留白就可以了。可以使用相对定位移动 left和right部分。
至此，我们完成了三列中间自适应的布局，也就是传说中的圣杯布局：完整代码如下：
<!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"
>
<
meta
name=
"viewport"
content=
"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scale=0"
/>
<
title
>Document
</
title
>
<
style
>
.box{
position:
relative;
float:
left
}
.container{
padding:
0
200px
0
300px
}
.left{
width:
300px;
height:
300px;
background:
red;
margin-left:
-100%;
left:
-300px;
}
.right{
width:
200px;
height:
300px;
background:
rgb(
40,
14,
185);
margin-left:
-200px;
right:
-200px;
}
.main{
width:
100%;
height:
300px;
background-color:
green
}
<
/
style
>
</
head
>
<
body
>
<
div
class=
"container"
>
<
div
class=
"main box"
></
div
>
<
div
class=
"left box"
></
div
>
<
div
class=
"right box"
></
div
>
</
div
>
</
body
>
</
html
>
444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
