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

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

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

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

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

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

*{margin:;padding:}
.main { padding: px }
.main>div{ float:left;position:relative;height:px }
.middle { width:%;background:red }
.left { width:px;margin-left:%;left:px;background:blue }
.right { width:px;margin-left:px;right:px;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: ;padding:; }
.main>div { float:left;position: relative;height: px; }
.middle { width: %;background-color: red }
.left { width:px;margin-left:%;background-color:blue }
.right { width: px;margin-left:px;background-color:pink }
.middle-inner{margin: px; background-color: red; height:px;} /*区别*/
复制代码
           

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: ;padding:; }
.main{width:%;}
.main>div{height:px;}
.middle{width:%;background: red;}
.left{position: absolute;top:;left:;width:px;background-color: blue;}
.right{position: absolute;top:;right:;width:px;background-color: pink}
复制代码
           

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