圣杯布局与双飞翼布局区别(左右两栏固定，中间撑满屏幕)

区别看图：圣杯布局是独立的左中右结构，而双飞翼是让左中右在一行显示

不管是圣杯还是双飞翼中间模块必须要在所有的模块的最上边

1.圣杯布局,中间的优先渲染，独立的左中右结构

    <div class="main">
	<!-- middle必须要在所有模块的最上边 -->
	<div class="middle">中间</div>
	<div class="left">左边</div>
	<div class="right">右边</div>
    </div>
复制代码

让我们想一下圣杯布局的思路

*{margin:0;padding:0}
.main { padding:0 200px }
.main>div{ float:left;position:relative;height:300px }
.middle { width:100%;background:red }
.left { width:200px;margin-left:-100%;left:-200px;background:blue }
.right { width:200px;margin-left:-200px;right:-200px;background:pink}

复制代码

1.让左右浮动在一行显示，相对定位

2.让中间模块的middle宽度为100%

3.让左边的色块移动到middle前面，margin-left:-100%

4.让右边的色块移动到middle的后面，margin-left:-宽度

5.给三个小块的父元素加一个内填充的属性padding,为的是填充挤到中间

6.给左边的块移动到左边left:-200px, 给右边的块移动到右边right:-200px

2.双飞翼布局

<div class="main">
    <!-- middle必须要在所有模块的最上边 -->
    <div class="middle">
	<div class="middle-inner">中间</div>
    </div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
复制代码

让我们想一下双飞翼布局的思路

*{ margin: 0;padding:0; }
.main>div { float:left;position: relative;height: 300px; }
.middle { width: 100%;background-color: red }
.left { width:200px;margin-left:-100%;background-color:blue }
.right { width: 200px;margin-left:-200px;background-color:pink }
.middle-inner{margin:0 200px; background-color: red; height:300px;} /*区别*/
复制代码

1.给左，中，右 加浮动，在一行显示

2.给middle宽度为100%

3.让左边的模块移动middle的左边 margin-left:-100%

4.让右边的模块移动middle的右边 margin-left:-自己宽度

5.给middle里面的容器添加外间距 margin: 左右

3.定位

<div class="main">
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
复制代码

*{ margin: 0;padding:0; }
.main{width:100%;}
.main>div{height:300px;}
.middle{width:100%;background: red;}
.left{position: absolute;top:0;left:0;width:200px;background-color: blue;}
.right{position: absolute;top:0;right:0;width:200px;background-color: pink}
复制代码

转载于:https://juejin.im/post/5beaa9a9e51d4534015746ef