经典的双飞翼布局

作者: 人才辈出阿卡姆 | 来源:发表于2017-07-24 10:27 被阅读0次

CSS圣杯布局、双飞翼布局详解
页面布局的方式有哪些？
web学习CSS8：CSS网页布局基础
CSS 经典三列布局之双飞翼布局
特殊布局方法
圣杯布局和双飞翼布局
经典的双飞翼布局
圣杯布局和双飞翼布局.md
CSS高级技巧
圣杯布局or双飞翼布局

双飞翼布局是在圣杯布局的基础上进行的优化。好处是：去掉了圣杯布局中的定位，只使用浮动和负的margin-left就实现了相同效果，缺点是所有的页面元素都要进行浮动的设置。
将middle区域抽离出来，使用一个父容器包裹，父容器宽度100%，middle设置margin-left:200px;
margin-right:-220px;留出空白区域。类似圣杯的父容器padding。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    body{
        background-color: #ccc;
        text-align:center;
    }
    header{
        height:50px;
        background-color:pink;
        line-height:50px;
        float: left;
        width: 100%;
    }
    .container,.left,.right{
        float: left;
        min-height: 300px;
    }
    .container{
        width:100%;
    }
    .middle{
        margin:0 220px 0 200px;
        background-color: red;
        min-height: 300px;
    }
    
    .left{
        width:200px;
        background-color: yellow;
        margin-left:-100%;
    }
    .right{
        width:220px;
        background-color: blue;
        margin-left:-220px;
    }
    </style>
</head>
<body>
<header>
    <h2>我是header</h2>
</header>

<div class="container">
    <div class="middle">
        <h4>我是middle</h4>
        <p>我是内容部分我是内容部分是内容部分我是部分我是内容部分我是内容部分我</p>
    </div>
</div>

<div class="left">
        <h4>我是left</h4>
        <p>我是left的内容</p>
</div>

<div class="right">
        <h4>我是right的内容</h4>
        <p>我是right的内容</p>
</div>
    
</body>
</html>

image.png