Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 7月8日作业：默写出双飞翼布局的基本思路与实现代码
Blogger Information
Blog 7
fans 0
comment 0
visits 4600
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
7月8日作业：默写出双飞翼布局的基本思路与实现代码
陈康民的博客
Original
686 people have browsed it

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>

运行实例 »

点击 "运行实例" 按钮查看在线实例



Correction status：qualified

Teacher's comments：可能有人觉得这种布局不如绝对定位来得直接痛快, 但这是一种更加经得起推敲的模式, 相信前辈,相信同行, 相信大厂的选择
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post