圣杯布局和双飞翼布局

标签：img   http   idt   osi   hidden   overflow   min   技术分享   red   

圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。
圣杯布局实现的思路是：
1、将最外层的container的padding设置为 padding: 0 220px 0 200px;为左右两块让出空间；
2、将#middle, #left, #right三者设为浮动；
3、将middle的width设置为100%；
4、分别给#left设置margin-left，#right设置margin-right，将left和right拉到与middle同一水平；
5、再用定位将左右位置设置好。
html代码：

<div id="container">
        <div id="middle"></div>
        <div id="left"></div> 
        <div id="right"></div>   
    </div>  

css代码：

*, body {
            margin: 0;
            padding: 0;
        }
        #container {
            padding: 0 220px 0 200px;
            background: gray;
            height: 400px;
            overflow: hidden;
        }
        #middle, #left, #right {
            height: 400px;
            min-height: 130px;
            float: left;
            position: relative;
        }
        #middle {
            width: 100%;
        }
        #left {
            width: 200px;
            background: red;
            margin-left: -100%;
            left: -200px;
        }
        #right {
            width: 220px;
            background: orange;
            margin-right: -220px;
        }

双飞翼布局实现的思路是：
1、将#main, #sub, #extra三者设为浮动；
2、分别给#sub设置margin-left，#extra设置margin-left，将sub和extra拉到与main同一水平
3、将main的width设为100%；
4、在main里加一个main-inner，设置其margin-left、margin-right，为sub、extra腾出位置；
html代码：

<div id="main">
        <div id="main-inner">

        </div>
    </div>
    <div id="sub"></div>
    <div id="extra"></div>

css代码：

*, body {
            margin: 0;
            padding: 0;
        }
        #main, #main-inner, #sub, #extra {
            height: 400px;
            min-height: 130px;
            float: left;
        }
        #sub {
            width: 200px;
            margin-left: -100%;
            background: red;
        }
        #extra {
            width: 220px;
            margin-left: -220px;
            background: orange;
        }
        #main {
            width: 100%;
            background: green;
        }
        #main-inner {
            margin-left: 200px;
            margin-right: 220px;
            background: green;
        }

相同：
1、都用了浮动
2、都利用负的margin值，将两边拉到与中间同一水平
3、将中间的width设置为100%
区别：
1、前者用最外层的container的padding为左右腾出空间。后者在中间main里加了一个main-inner，并为左右腾出空间。
2、前者用到定位position，后者则在第2步骤中完成位置设置。

圣杯布局和双飞翼布局

标签：img   http   idt   osi   hidden   overflow   min   技术分享   red   

原文地址：https://www.cnblogs.com/Jomsou/p/9161813.html