收藏
批改状态：合格
老师批语：可能有人觉得这种布局不如绝对定位来得直接痛快, 但这是一种更加经得起推敲的模式, 相信前辈,相信同行, 相信大厂的选择
1、先div布局写出页面基本结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双飞翼布局</title> <link rel="stylesheet" href="0706.css"> </head> <body> <div class="header">导航栏</div> <div class="container"> <div class="wrap"> <div class="main">我是正文</div> </div> <div class="left">左</div> <div class="right">右</div> </div> <div class="footer">页脚</div> </body>
点击 "运行实例" 按钮查看在线实例
2、分配各元素宽高颜色，由于各个div元素都没有浮动，都在文本流中，所以每个div独占一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
body{
margin:0 auto;
}
.header{
width:100%;
height:60px;
background-color:lightgreen;
}
.container{
width:100%;
overflow:hidden;
}
.wrap{
width:inherit;
min-height:600px;
background-color:gray;
}
.left{
width:200px;
min-height:600px;
background-color:lightseagreen;
}
.right{
width:200px;
min-height:600px;
background-color:lightcoral;
}
.footer{
width: 100%;
height:60px;
background-color:lightslategray;
}
</style>
</head>
<body>
<div class="header">导航栏</div>
<div class="container">
<div class="wrap">
<div class="main">我是正文</div>
</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
<div class="footer">页脚</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3、把container 内的 3个div元素（wrap、left、right）设置左浮动，3个div实际上在同一行，但由于wrap把整行的宽度都占满了，所以把left和right挤到下一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
body{
margin:0 auto;
}
.header{
width:100%;
height:60px;
background-color:lightgreen;
}
.container{
width:100%;
overflow:hidden;
}
.wrap{
width:inherit;
min-height:600px;
background-color:gray;
}
.left{
width:200px;
min-height:600px;
background-color:lightseagreen;
}
.right{
width:200px;
min-height:600px;
background-color:lightcoral;
}
.wrap, .left, .right{
float:left;
}
.footer{
width: 100%;
height:60px;
background-color:lightslategray;
}
</style>
</head>
<body>
<div class="header">导航栏</div>
<div class="container">
<div class="wrap">
<div class="main">我是正文</div>
</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
<div class="footer">页脚</div>
</body>点击 "运行实例" 按钮查看在线实例
4、通过margin把 left 和 right 元素往上一行拉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
body{
margin:0 auto;
}
.header{
width:100%;
height:60px;
background-color:lightgreen;
}
.container{
width:100%;
overflow:hidden;
}
.wrap{
width:inherit;
min-height:600px;
background-color:gray;
}
.left{
width:200px;
min-height:600px;
background-color:lightseagreen;
}
.right{
width:200px;
min-height:600px;
background-color:lightcoral;
}
.wrap,.left,.right{
float:left;
}
.left{
margin-left:-100%;
}
.right{
margin-left:-200px;
}
.footer{
width: 100%;
height:60px;
background-color:lightslategray;
}
</style>
</head>
<body>
<div class="header">导航栏</div>
<div class="container">
<div class="wrap">
<div class="main">我是正文</div>
</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
<div class="footer">页脚</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
5、由于main左右两边被 left 和 right 元素 遮挡，所以通过margain 空出左右两边位置，实现整个双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
body{
margin:0 auto;
}
.header{
width:100%;
height:60px;
background-color:lightgreen;
}
.container{
width:100%;
overflow:hidden;
}
.wrap{
width:inherit;
min-height:600px;
background-color:gray;
}
.left{
width:200px;
min-height:600px;
background-color:lightseagreen;
}
.right{
width:200px;
min-height:600px;
background-color:lightcoral;
}
.wrap,.left,.right{
float:left;
}
.left{
margin-left:-100%;
}
.right{
margin-left:-200px;
}
.main{
margin:0 200px;
}
.footer{
width: 100%;
height:60px;
background-color:lightslategray;
}
</style>
</head>
<body>
<div class="header">导航栏</div>
<div class="container">
<div class="wrap">
<div class="main">我是正文</div>
</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
<div class="footer">页脚</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
