- 两边定宽,中间自适应
- 要求先渲染中间主题部分(所以中间的节点是需要写在左右节点之前的)
//HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<title>圣杯布局</title>
</head>
<body>
<div id="head">header</div>
<div id = 'content'>
<div id = 'middle'>我在中间,但要首先渲染</div>
<div id = 'left'>我在左边</div>
<div id = 'right'>我在右边</div>
</div>
<div id="foot">footer</div>
</body>
</html>
//css代码
#content {
padding: 0 100px 0 100px;//左右留出空白
overflow: hidden;//闭合浮动
border:2px solid black;}
#middle {
width: 100%;
background-color: pink;
float: left;
}
#left {
width: 100px;
background-color: red;
float: left;
margin-left: -100%;//移到上一行开头
position: relative;//相对定位
left: -100px;//左移到父级设置的padding值所留出的空白区
}
#right {
background-color: blue;
float: left;
width: 100px;
margin-left: -100px;//移到上一行末尾
position: relative; //相对定位
right:-100px; //右移到父级设置的padding值所留出的空白区
}
#head{
background-color: aqua;
}
#foot{
background-color: blueviolet;
clear: both; //防止因为浮动导致上移,但其实我试了一下也可不用,因为含有浮动元素的父级元素设置了`overflow:hidden`,触发bfc,闭合了浮动
}
效果如下:
圣杯布局
和她是同胞兄弟的还有一个双飞翼布局,他们所实现的效果是相同的,但是在处理中间区域被遮挡的问题上做法稍有不同
- 圣杯布局:为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
- 双飞翼布局:为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置
个人觉得双飞翼布局更简单一些,不会涉及到相对定位
