一个例子 - 看懂双飞翼布局

作者: Jason_Zeng | 来源:发表于2020-04-13 17:09 被阅读0次

一个例子 - 看懂双飞翼布局
CSS 经典三列布局之双飞翼布局
特殊布局方法
圣杯布局和双飞翼布局
双飞翼布局
实现两边定宽，中间自适应
CSS高级技巧
CSS布局分类
圣杯布局和双飞翼布局
双飞翼布局和圣杯布局的对比

双飞翼布局

解决了圣杯布局宽度变窄后错乱的问题，增加了一个dom节点，没有了padding,增加了内部margin撑开

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="middleWrapper">
        <div class="middle">middle</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>

</html>

css

    html,
    body {
        height: 100%;
        margin: 0;
    }

    /* body {
        padding:0 200px;  
    } */


    .middleWrapper {
        width: 100%;
        background: grey;
        float: left;
        height:100px;
    }

    .middle {
        margin: 0 200px;
        height: 100px;
        /* 撑满父元素 */
        /* float: left; */
        /* 浮动 */
    }

    .left {
        width: 200px;
        background: pink;
        height: 100px;
        float: left;
        /* 浮动 */
        /* left: -200px; */
        /* 用于再往左边移动自身宽度来不遮住middle */
        position: relative;
        /* 相对定位才可以left */
        margin-left: -100%;
        /* 负margin就是-100%相当于往左边移动100%父元素的宽度，就会移动到上一行中的开头 */
    }

    .right {
        float: left;
        width: 200px;
        background: lightseagreen;
        height: 100px;
        position: relative;
        margin-left: -200px;
        /* 移动自身宽度可以到上一行*/
        /* right: -200px; */
        /*由于有padding的存在所以再移动一个偏移自身的距离*/
    }