收藏
批改状态：未批改
老师批语：
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。左列和右列宽度恒定，中间列的宽度根据浏览器窗口的大小自适应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>经典双飞翼布局</title>
<style type="text/css">
.header, .footer {
/*宽度为窗口的宽度,自适应变化*/
width: 100%;
/*头部与尾部高度统一设置为50px*/
height: 50px;
/*背景色设置为浅灰*/
background-color: lightgray;
}
.footer {
clear: both;
}
/*设置头部和尾部的样式*/
.content{
width: 80%;
min-height: 100%;
background-color: gray;
margin: auto;
text-align: center;
line-height: 50px;
}
/*设置主体样式*/
.center{
width: 100%;
margin:auto;
overflow: hidden;
background-color: yellow;
}
/*设置包裹中间区域的区块样式*/
.box{
width: 100%;
background-color: cyan;
float: left;
}
/*设置中间区域的样式*/
.main{
min-height:600px;
margin: 0 20%;
background-color: wheat;
text-align: center;
line-height: 600px;
}
/*设置左边区的样式*/
.left{
width: 20%;
min-height:600px;
float:left;
margin-left:-100%;
background-color: lightskyblue;
text-align: center;
line-height: 600px;
}
/*设置右边区的样式*/
.right{
width: 20%;
min-height:600px;
float:left;
margin-left:-20%;
background-color: lightgreen;
text-align: center;
line-height: 600px;
}
</style>
</head>
<body>
<div class="header">
<div class="content">头部区</div>
</div>
<div class="center">
<div class="box">
<div class="main">中间区</div>
</div>
<div class="left">
左边区
</div>
<div class="right">
右边区
</div>
</div>
<div class="footer">
<div class="content">尾部区</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
</head>
<style type="text/css">
.header, .footer {
/*宽度为窗口的宽度,自适应变化*/
width: 100%;
/*头部与尾部高度统一设置为50px*/
height: 50px;
/*背景色设置为浅灰*/
background-color: lightgray;
}
.footer {
clear: both;
}
/*设置头部和尾部的样式*/
.content{
width: 100%;
/*width: 1000px;*/
min-height: 100%;
background-color: gray;
margin: auto;
text-align: center;
line-height: 50px;
}
/*设置主体样式*/
.center{
width: 60%;
margin:auto;
overflow: hidden;
background-color: yellow;
padding: 0 20%;
}
.container .main {
min-height: 650px;
width: 100%;
float:left;
background-color: wheat;
}
/*设置包裹中间区域的区块样式*/
.center .main{
min-height: 650px;
background-color: wheat;
width: 100%;
float:left;
}
/*设置左边区的样式*/
.center .left {
width: 33.3%;
min-height: 650px;
float:left;
margin-left: -100%;
position: relative;
left: -33.3%;
background-color: lightskyblue;
}
/*设置右边区的样式*/
.center .right {
width: 33.3%;
min-height: 650px;
float:left;
margin-left:-33.3%;
position: relative;
right:-33.3%;
background-color: lightgreen;
}
</style>
<body>
<div class="header">
<div class="content">网站头部</div>
</div>
<div class="center">
<div class="main">主体</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<div class="footer">
<div class="content">网站底部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：
其实圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。
圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
就是”双飞翼布局比圣杯布局多创建了一个div，但不用相对布局。
手抄代码
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
