没有比这更清楚的双飞翼布局了

文章目录

什么是双飞翼布局
双飞翼布局的特点
怎么实现双飞翼布局
完整代码展示
双飞翼布局与圣杯布局的不同
圣杯布局参考
原创不易，点个赞再走吧。您的支持是对小白的巨大的鼓励

什么是双飞翼布局

圣杯布局是一个两侧宽度固定，中间宽度自适应的三栏布局

双飞翼布局的特点

中间部分在DOM结构上优先，以便先行渲染
允许三列中的任意一列成为最高列（三列高度不一样并且可以以任一列的高度为最高）
只需要使用一个格外的
标签（相对于圣杯布局），给main里面添加一个内容标签content

怎么实现双飞翼布局

写下HTML代码（相对于圣杯布局使用一个格外的
标签）

<body>
    <div class="container">
        <div class="main">
            <div class="content">中间</div></div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
</body>

使三栏都处于左浮状态，并且使中间栏的宽度成父容器的100%

  .container {
        min-width: 400px;
        height: 200px;
        background-color: red;
   }
   .left {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        float: left; 
   }
   .right {
        width: 150px;
        height: 150px;
        background-color: skyblue;
        float: left;
   }
   .main {
       width: 100%;
       height: 100px;
       float: left;
       background-color:greenyellow;
       
   }

在这里插入图片描述

为中间栏中的content设置左右padding的值，使其以后为侧边栏定位空出位置，padding的值为侧边栏的宽

   .content {
   /*预留出位置给左右栏*/
       margin-left: 200px;
       margin-right: 150px;
   }

在这里插入图片描述
4. 为两侧侧边栏加上负margin,用以调整位置。其中左边栏设为margin-left:-100%,而右边栏的margin-left则为负的其自身宽度（利用了浮动元素的负margin到一定值后会使其自身往上一行移动的原理）

   .left {
        margin-left: -100%;
   }
   .right {
        margin-left: -150px;
   }

在这里插入图片描述

完整代码展示

<style>
    body {
        margin: 0;
        padding: 0;
   } 
   .container {
        min-width: 400px;
        height: 200px;
        background-color: red;
   }
   .left {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        float: left; 
        margin-left: -100%;
   }
   .right {
        width: 150px;
        height: 150px;
        background-color: skyblue;
        float: left;
        margin-left: -150px;
   }
   .main {
       width: 100%;
       height: 100px;
       float: left;
       background-color:greenyellow;
       
   }
   .content {
       margin-left: 200px;
       margin-right: 150px;
   }
</style>
<body>
    <div class="container">
        <div class="main">
            <div class="content">中间</div>
        </div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
</body>