区别看图:圣杯布局是独立的左中右结构,而双飞翼是让左中右在一行显示布局
不论是圣杯仍是双飞翼中间模块必需要在全部的模块的最上边spa
<div class="main">
<!-- middle必需要在全部模块的最上边 --> <div class="middle">中间</div> <div class="left">左边</div> <div class="right">右边</div> </div>
复制代码
让咱们想一下圣杯布局的思路code
*{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.让左右浮动在一行显示,相对定位cdn
2.让中间模块的middle宽度为100%xml
3.让左边的色块移动到middle前面,margin-left:-100%blog
4.让右边的色块移动到middle的后面,margin-left:-宽度string
5.给三个小块的父元素加一个内填充的属性padding,为的是填充挤到中间it
6.给左边的块移动到左边left:-200px, 给右边的块移动到右边right:-200pxio
<div class="main">
<!-- middle必需要在全部模块的最上边 --> <div class="middle"> <div class="middle-inner">中间</div> </div> <div class="left">左边</div> <div class="right">右边</div> </div>
复制代码
让咱们想一下双飞翼布局的思路class
*{ 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: 左右
<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}
复制代码