经典的双飞翼布局

双飞翼布局是在圣杯布局的基础上进行的优化。好处是:去掉了圣杯布局中的定位,只使用浮动和负的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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,379评论 1 84
  • 在前端布局中,事实上,圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应...
    风铭阅读 618评论 1 5
  • 一、负边距在让元素产生偏移时和position: relative有什么区别? 负margin和position:...
    婷楼沐熙阅读 240评论 0 3
  • 三栏式布局 涉及浮动和清除浮动,主要讲解“圣杯”和“双飞翼”两种解决方法。这两种方法实现的都是三栏布局,两边的盒子...
    紫电倚青霜阅读 974评论 0 5
  • 前言 现在,我们被称为前端工程师。然而,早年给我们的称呼却是页面仔。或许是职责越来越大,整体的前端井喷式的发展,使...
    Calvin李阅读 183评论 0 0