CSS之圣杯布局和双飞翼布局

来源：互联网发布：上海网络约车最新消息编辑：程序博客网时间：2024/04/30 19:50

圣杯布局的构造过程：

<div class="container">    <!--先写中间部分-->    <div class="middle"></div>    <div class="left"></div>    <div class="right"></div></div>

三者都设置向左浮动。
设置middle宽度为100%。
设置负边距，.left设置负左边距为100%，.right设置负左边距为负的自身宽度。
设置container的padding值给左右两个子面板留出空间。
设置两个子面板为相对定位，.left的left值为负的.left宽度，.right的right值为负的.right宽度。

圣杯布局有个问题，当面板的middle部分比两边的子面板宽度小的时候，布局就会乱掉。双飞翼布局在middle上添加一个标签解决了此问题。

双飞翼布局的构造过程：

<!--先写中间部分--><div class="middle">    <div class="middle-son"></div></div><div class="left"></div><div class="right"></div>

三者都设置向左浮动。
设置middle宽度为100%。
设置负边距，.left设置负左边距为100%，.right设置负左边距为负的自身宽度。
设置middle-son的margin值给左右两个子面板留出空间。

二者区别：

双飞翼布局给主面板添加了一个父标签用来通过margin给子面板腾出空间。
圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局的问题。
双飞翼布局不用设置相对布局，以及对应的left和right值。

圣杯布局demo:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>demo-圣杯布局</title><style>    *{        margin: 0;        padding: 0;    }    body{        min-width: 650px;    }    header,footer{        text-align: center;        background: #aaaaaa;    }    .container{        overflow: hidden;        padding: 0 200px 0 200px;;    }    .middle{        position: relative;        float: left;        width: 100%;        background: red;        height: 100px;    }    .left{        position: relative;        float: left;        width: 200px;        background: green;        height: 100px;        margin-left: -100%;        left: -200px;    }    .right{        position: relative;        float: right;        width: 200px;        background: yellow;        height: 100px;        margin-left: -200px;        right: -200px;    }</style></head><body><header><h1>header</h1></header><div class="container">    <!--先写中间部分-->    <div class="middle"></div>    <div class="left"></div>    <div class="right"></div></div><footer><h1>footer</h1></footer></body></html>

双飞翼布局demo:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>双飞翼布局</title>    <style>        *{            margin: 0;padding: 0;        }        body{            min-width: 650px;        }        header,footer{            text-align: center;            background: #aaaaaa;        }        .middle-son{            margin: 0 200px 0 200px;            height: 100px;        }        .middle{            float: left;            height: 100px;            width: 100%;            background: red;        }        .left{            float: left;            width: 200px;            height: 100px;            background: green;            margin-left: -100%;        }        .right{            float: left;            width: 200px;            height: 100px;            background: yellow;            margin-left: -200px;        }    </style></head><body><header><h1>header</h1></header><!--先写中间部分--><div class="middle">    <div class="middle-son"></div></div><div class="left"></div><div class="right"></div><footer><h1>footer</h1></footer></body></html>

0 0