双飞翼布局与圣杯布局

Posted runhua

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了双飞翼布局与圣杯布局相关的知识,希望对你有一定的参考价值。

一、圣杯设计思路:

DOM结构:

<div class="container">

    <div class="main">main</div>

    <div class="left">left</div>

    <div class="right">right</div>

</div>

思路:

1.将div.container通过padding来设置左右的空闲位置来让左右栏占据,所以设置padding-left为左栏宽度,padding-right为右栏宽度。

2.让三个元素统一左浮动,从左到右开始顺序为main,left,right。

3.然后设置div.main的宽度为100%,让它占据container的一行内容。

4.设置左栏的margin-left为-100%,右栏margin-left为其width的负值,这样左栏和右栏就会分别在main的左右两边

5.设置左右栏为相对定位,然后将左右栏定位到左右的空白处

 

技术分享图片
圣杯布局

参考代码:

 

技术分享图片
 

二、双飞翼布局设计思路:

DOM结构:

<div>

    <div class="main">

        <div class="content"></div>

    </div>

    <div class="left"></div>

    <div class="right"></div>

<div/>

 

思路:

与圣杯布局相类似,但因为双飞翼布局,采取了div.main中嵌套一个div.content,因此,利用div.content设置margin,来让左右两边腾出位子来让左右栏,就不需要使用相对定位了:

1.设置div.main的宽度为100%,让它占据container的一行内容。

2.让三个元素统一左浮动,从左到右开始顺序为main,left,right。

3.设置左栏的margin-left为-100%,右栏margin-left为其width的负值,这样左栏和右栏就会分别在main的左右两边

4.div.content设置margin,来让左右两边腾出位子来让左右栏占据。

参考代码:

 

技术分享图片
 



以上是关于双飞翼布局与圣杯布局的主要内容,如果未能解决你的问题,请参考以下文章

圣杯布局与双飞翼布局

圣杯布局与双飞翼布局

圣杯布局与双飞翼布局

css圣杯布局的三种方式与双飞翼布局

双飞翼布局与圣杯布局

三栏布局--圣杯与双飞翼