圣杯和双飞翼布局都是左右两栏宽度固定，中间部分宽度自适应。
圣杯布局
参考：http://www.alistapart.com/articles/holygrail/
1、创建HTML结构
<body>
<div id="header">header</div>
<div id="container"></div>
<div id="footer"></div>
</body>
在css添加样式：
#header,
#footer {
height: 30px;
background: #666;
}
2、在#container添加列，网页被浏览器解析时，按照中间、左、右的顺序进行加载 —— 也就是我们常说的”重要的内容先加载”。html代码中 middle部分首先要放在container的最前部分，然后是left,right。
<div id="header">header</div>
<div id="container">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div id="footer">footer</div>
在css添加对应的样式：
#container:after {
content: '';
display: block;
clear: both;
}
.middle,
.left,
.right {
float: left;
height: 200px;
}
.middle {
width: 100%;
background: #ccc;
}
.left {
width: 200px;
background: blue;
}
.right {
width: 150px;
background: orange;
}
此时页面效果如下：middle、left、right都设置左浮动，middle的width为100%自适应，所以占据一整行，left、right被挤到下一行；清除浮动使#footer不受影响。
3、将左列和右列放在对应的位置与middle在同一水平位置。
把left的左边距设置为负的middle的宽度，left才会移动到最左边与middle在同一行。
.left {
width: 200px;
margin-left: -100%;
background: blue;
}
把right的左边距设置为负的自身宽度，让它移动到最右边和middle在同一行。
.right {
width: 150px;
margin-left: -150px;
background: orange;
}
此时的效果如下，三栏在同一行。
4、虽然三栏都在同一行，但middle的左右部分都被left、right重叠遮住。所以给#container设置左右填充，往中间挤。
#container {
padding: 0 150px 0 200px;
}
5、#container往中间挤后，左右留出的空间刚好可以给left和right。对left和right设置position：relative；相对自身位置移动到对应的位置。
.left {
position: relative;
right: 200px;
width: 200px;
margin-left: -100%;
background: blue;
}
.right {
position: relative;
left: 150px;
width: 150px;
margin-left: -150px;
background: orange;
}
最后的效果如下：
注意： 在浏览器调整大小时，当middle的宽度小于left的宽度时，布局会乱掉，middle会下移。所以在body设置最小宽度为2*left的宽度+right的宽度，当页面达到最小宽度时，middle的宽度等于left的宽度，不会小于。
body {
min-width: 550px;
}
总的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style type="text/css">
/*圣杯布局：网页被浏览器解析时，按照中间、左、右的顺序进行加载 —— 也就是我们常说的”重要的内容先加载”。
1.
#container里的三栏float：left；
#middle的宽度是自适应的 width：100%，#left和#right的宽度时固定的width都为200px；
所以#main占据一行，#left和#right被挤到下一行。
2.要把#left和#right放在#main的左右两侧，使用负边距
（#left）margin-left：-100%；
（#right）margin-left：-200px；
此时#left、#right虽然位置对了，但是是叠加在#middle的左右上，遮住了#middle的左右的部分。
3.给#middle设置padding，padding-left：200px（#left的宽度）；padding-right：200px（#right的宽度）；
4.给#left和#right设置position：relative；使其相对于自己的位置偏移到合适的位置。
*/
body {
min-width: 550px; /* 2lw+rw 2倍的左栏宽度+右栏宽度 当middle的宽度小于left的宽度时，布局才不会乱*/
}
#container:after {
content: '';
display: block;
clear: both;
}
#header,#footer {
height: 50px;
background: #666;
}
#container {
padding: 0 150px 0 200px;
overflow: hidden;
}
#container .column {
position: relative;
float: left;
height: 300px;
}
#middle {
width: 100%;
background: #ccc;
}
#left {
right: 200px;
width: 200px;
margin-left: -100%;
background: blue;
}
#right {
left: 150px;
width: 150px;
margin-left: -150px;
background: orange;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="container">
<div id="middle" class="column">middle</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
双飞翼布局
双飞翼布局跟圣杯布局差不多，只是做了点修改。
1、创建HTML结构
<div id="header">header</div>
<div id="main"></div>
<div class="sub">sub</div>
<div class="extra">extra</div>
<div id="footer">footer</div>
在css添加样式：
#header,
#footer {
height: 30px;
background: #666;
}
.sub,
.main,
.extra{
float: left;
min-height: 130px;
}
.sub{
width: 200px;
background: red;
}
.extra{
width: 220px;
background: blue;
}
.main{
width: 100%;
}
.footer {
clear: both;
}
此时页面效果如下：main、sub、extra都设置左浮动，main的width为100%自适应，所以占据一整行，sub、extra被挤到下一行；清除浮动使#footer不受影响。
2、将sub和extra放在对应的位置与main在同一水平位置。
把sub的左边距设置为负的main的宽度，sub才会移动到最左边与main在同一行；把extra的左边距设置为负的自身宽度，让它移动到最右边和main在同一行。
.sub{
width: 200px;
margin-left: -100%;
background: red;
}
.extra{
width: 220px;
margin-left: -220px;
background: blue;
}
效果如下：
3、main内容被覆盖了吧，除了使用外围的padding，还可以考虑使用margin。给main增加一个内层div-- main-inner, 然后margin:0 220px 0 200px。
<div class="header">header</div>
<div class="main">
<div class="main-inner">main</div>
</div>
<div class="sub">sub</div>
<div class="extra">extra</div>
<div class="footer">footer</div>
.main-inner {
margin: 0 220px 0 200px;
height: 200px;
background: #999;
}
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双飞翼</title>
<style>
body {
min-width: 700px;
}
.header,
.footer {
height: 30px;
background: #666;
}
.sub,
.main,
.extra{
float: left;
height: 200px;
}
.sub{
width: 200px;
margin-left: -100%;
background: red;
}
.extra{
width: 220px;
margin-left: -220px;
background: blue;
}
.main{
width: 100%;
}
.footer {
clear: both;
}
.main-inner {
margin: 0 220px 0 200px;
height: 200px;
background: #999;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="main">
<div class="main-inner">main</div>
</div>
<div class="sub">sub</div>
<div class="extra">extra</div>
<div class="footer">footer</div>
</body>
</html>
网友评论