收藏
批改状态：合格
老师批语：
圣杯布局和双飞是前端布局中绕不开的两座的大山，二者解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染，但二者在实现的时候却有这微小的差异。
圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding，将左右两个div用相对布局移动到两侧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.header,.footer{
width: 100%;
height: 60px;
background-color: #CC6666;
}
.footer{
/*清除浮动*/
clear: both;
}
.content{
width: 1000px;
height: 100%;
background-color: #CC9966;
margin: auto;
}
.container{
width: 600px;
/*使父容器里的所有区块居中*/
margin: auto;
background-color: red;
/*包住浮动的区块*/
overflow: hidden;
/*将left和right弹出去*/
padding:0 200px;
}
.mian{
/*宽度和父元素一致才能将left和right挤下来*/
width: 100%;
background-color: #CCCC99;
min-height: 600px;
float: left;
}
.left{
width: 200px;
background-color: #999999;
min-height: 600px;
/*当进行左浮动的时候，由于mian的宽度和父容器一致所有被挤了下来*/
float: left;
/*外边距为-100%是为了让它回到初始位置*/
margin-left: -100%;
/*设置相对定位，相对于父元素向左移动-200px*/
position: relative;
left: -200px;
}
.right{
width: 200px;
background-color: #9999CC;
min-height: 600px;
float: left;
/*设置左外边距为当前宽度的负值,使之定位到main区块的右边*/
margin-left: -200px;
/*设置相对定位，相对于父元素向右移动-200px*/
position: relative;
right: -200px;
}
</style>
</head>
<body>
<div class="header">
<div class="content">头</div>
</div>
<div class="container">
<div class="mian">主题</div>
<div class="left">左</div>
<div class="right">右fdsfsfdsfsfdfsd</div>
</div>
<div class="footer">
<div class="content">尾部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
解法：
圣杯布局必须有一个父容器，父容器内的三个div，必须保证主体在前，以保证优先渲染。
主体宽度一定要跟父容器一致
父元素内的div要全部左浮动并设置左右divmargin-left使他们回到原来的位置
父元素要设置padding撑开左右div 的位置
父元素内的左右div进行相对定位，移动到撑开的两边
双飞翼布局直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.header,.footer{
width: 100%;
height: 60px;
background-color: #333399;
}
.centent{
width: 1000px;
height: 100%;
background-color: #336699;
margin: auto;
}
.container{
width:1000px;
margin: auto;
overflow: hidden;
background-color: #339999;
}
.warp{
width: 100%;
float: left;
background-color: #33CC99;
}
.main{
min-height: 600px;
background-color: #33FF99;
margin: 0 200px;
}
.left{
width: 200px;
min-height: 600px;
float: left;
background-color: #660099;
margin-left: -100%;
}
.right{
width: 200px;
min-height: 600px;
float: left;
background-color: #663399;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="header">
<div class="centent">头部</div>
</div>
<div class="container">
<div class="warp">
<div class="main">主体</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="footer">
<div class="content">尾部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
双飞翼布局基本上跟圣杯布局一样，重点在于，
双飞翼布局主体content套了一个父级块warp，warp设置宽度，主体沿用父元素的宽度就行了。
左右div使用margin-left回到起始位。
主体div使用magin将两侧div挤开。
一下是手写内容
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
