HTML双飞翼

最新推荐文章于 2021-06-28 08:42:17 发布

Judy1623

最新推荐文章于 2021-06-28 08:42:17 发布

阅读量864

点赞数 2

分类专栏：前端知识点 html 文章标签： html双飞翼布局

前端知识点同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

关于html双飞翼布局，前今天看到，之前知道但是不明白是双飞翼，今天总结一下！

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrap">
        <section id="main">
            <div class="content">
                content
            </div>
        </section> 
        <aside id="left">left</aside>
        <aside id="right">right</aside>
    </div>
  
</body>
</html>

双飞翼的结构如下：

将main的宽设置100%，将其填满布局；
设置left的宽,例如宽：200px 让left占main的200px
设置右边的宽，例如宽：200px 让right占main的200px
让main的左右间距为200px ; margin:0 200px;

从其思路能看出来实现双飞翼的要点有两个，一是如何让left和right覆盖main的左右；二是要让mainIN空出左右边距；

    body{
            margin:0;
        }
        .wrap{
            width: 100%;
            margin:0 auto;
            overflow: hidden;
        }
        #main{
            width: 100%;
            background: red;
            float: left
        }
        #left{
            width:200px;
            height:500px;
            background: #ccffff;
            float: left;
            margin-left: -100%;
        }
        #right{
            width:200px;
            height:500px;
            background: #ccffff;
            float: left;
            margin-left: -200px;
        }
        .content{
            height:500px;
            margin:0 200px;
        }

1、利用float：left让三块浮动，让这三块有并排的可能；

2、margin:0 200px; main的左右空出；

3、利用margin-left让左右两块移动到main的同一行

4、最后显示的三部分为left、main、right；