三种实现圣杯布局方法
2017-02-17 本文已影响0人
ykliu
本文介绍三种实现圣杯布局的方法,前两种可归为一类，与第三种方法差别在于加载顺序不同。
圣杯布局实现1：
步骤1：给出 HTML结构：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>圣杯布局1</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
text-Align: center;
}
#top {
background: #666;
height: 60px;
}
#left {
background: #E79F6D;
}
#content {
background: #D6D6D6;
}
#right {
background: #77BBDD;
}
#foot {
background: #666;
height: 50px;
}
</style>
</head>
<body>
<div id="parents">
<div id="top">这是Top!</div>
<div id="main">
<div id="left">这是Left!</div>
<div id="content">这是Content!<br><br><br><br><br><br><br><br><br><br><br><br><br><br>这是多行高度！<br></div>
<div id="right">这是Right!</div>
</div>
<div id="foot">这是Foot!</div>
</div>
</body>
</html>
效果如下：
Paste_Image.png
步骤2：
- 设置中间三个div向左浮动，使其排列在一行：
#left, #content,#right{ float:left;}。 - 设置Foot元素清除浮动，阻止与上面的main部分重叠：
#foot { background: #666; height: 50px; clear: both;}。 - 设置中间三个div的宽度，左右定宽，中间宽度自适应：
#left {
background: #E79F6D;
width: 150px;
}
#content {
background: #D6D6D6;
width: 100%;
}
#right {
background: #77BBDD;
width: 200px;
}
效果如下：
Paste_Image.png
步骤3：
- 现在Content宽度为100%，占满整个浏览器宽度，若想要中间Content给两边Left和Right挪出空间，则需要设置容器main左右
padding值。 - 由于容器
main内元素均设置左浮动，都不在文档流中，导致main高度塌陷，设置overflow:hidden可解决该问题。
#main{
padding-left: 150px;
padding-right: 200px;
background-color: bisque;
}
效果如下：
Paste_Image.png
步骤4：
由于设置padding后，中间三个div宽度之和超过浏览器宽度，所以各独占一行，要使Left元素和Right元素分别移动到Content的左右两边，则需要给Left设置负的margin-left,给Right设置负的margin-right。
#left {
background: #E79F6D;
width: 150px;
margin-left: -150px;;
}
#right {
background: #77BBDD;
width: 200px;
margin-right: -200px
}
效果如下：
Paste_Image.png
步骤5：
使中间三个div高度自适应，即高度相等且等于高度最大的div，使用内外下边距相抵消的方法：
#left, #content, #right { float:left; padding-bottom: 2000px; margin-bottom: -2000px; }
最终效果如下：
Paste_Image.png
最终代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>圣杯布局1</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
text-Align: center;
}
#top {
background: #666;
height: 60px;
}
#left, #content,#right{
float:left;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
#main{
padding-left: 150px;
padding-right: 200px;
background-color: bisque;
overflow: hidden;
}
#left {
background: #E79F6D;
width: 150px;
margin-left: -150px;;
}
#content {
background: #D6D6D6;
width: 100%;
}
#right {
background: #77BBDD;
width: 200px;
margin-right: -200px;
}
#foot {
background: #666;
height: 50px;
clear: both;
}
</style>
</head>
<body>
<div id="parents">
<div id="top">这是Top!</div>
<div id="main">
<div id="left">这是Left!</div>
<div id="content">这是Content!<br><br><br><br><br><br><br><br><br><br><br><br><br><br>这是多行高度！<br></div>
<div id="right">这是Right!</div>
</div>
<div id="foot">这是Foot!</div>
</div>
</body>
</html>
圣杯布局实现2：
与方法1的前三步相同，在第四步时采用了不同的解决方案：
步骤4-1
通过为Content和Right设置一个负的margin-left属性：
#content {
background: #D6D6D6;
width: 100%;
margin-left: -150px;
}
#right {
background: #77BBDD;
width: 200px;
margin-left: -200px;
}
效果如下：（此时Left被覆盖）
Paste_Image.png
步骤4-2
设置Left和Right的positon分别调整其位置使左移和右移：
#left {
background: #E79F6D;
width: 150px;
position: relative;
left: -150px;
}
#right {
background: #77BBDD;
width: 200px;
margin-left: -200px;
position: relative;
left: 200px;
}
效果如下：
Paste_Image.png
步骤四完成，步骤五同方法1。
最终代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>圣杯布局1</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
text-Align: center;
}
#top {
background: #666;
height: 60px;
}
#left, #content,#right{
float:left;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
#main{
padding-left: 150px;
padding-right: 200px;
background-color: bisque;
overflow: hidden;
}
#left {
background: #E79F6D;
width: 150px;
position: relative;
left: -150px;
}
#content {
background: #D6D6D6;
width: 100%;
margin-left: -150px;
}
#right {
background: #77BBDD;
width: 200px;
margin-left: -200px;
position: relative;
left: 200px;
}
#foot {
background: #666;
height: 50px;
clear: both;
}
</style>
</head>
<body>
<div id="parents">
<div id="top">这是Top!</div>
<div id="main">
<div id="left">这是Left!</div>
<div id="content">这是Content!<br><br><br><br><br><br><br><br><br><br><br><br><br><br>这是多行高度！<br></div>
<div id="right">这是Right!</div>
</div>
<div id="foot">这是Foot!</div>
</div>
</body>
</html>
圣杯布局实现3（先加载主列）：
效果如下：
4770448-f4aeb930e2732d89.png
最终代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<title>polandeme</title>
<meta charset="utf-8">
<style>
body{
color: aliceblue;
}
.main-wrap{
margin-left: 190px;
margin-right: 190px;
}
/*.grid-s5m0e5 { width:100%;}*/
.col-main {
float:left;
width: 100%;
min-height:30px;
background:#000;
}
.col-sub {
float:left;
margin-left: -100%;
width:190px;
min-height:30px;
background:#f00;
}
.col-extra {
margin-left: -190px;
float:left;
width:190px;
min-height:30px;
background:#00f;
}
</style>
</head>
<body>
<div class="grid-s5m0e5">
<div class="col-main">
<div class="main-wrap">
我是主列，出来吧！
</div>
</div>
<div class="col-sub">我是子列</div>
<div class="col-extra">我是附加列</div>
</div>
</body>
</html>
