CSS布局之圣杯布局和双飞翼布局

其实圣杯布局和双飞翼布局实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局。它们实现的效果都是一样的,差别在于其实现的思想。

一、圣杯布局

html代码中,将重要的内容middle放在container的最前面,然后是left、right
1、将三者均设置

float:left

2、将middle的宽度设置为

width:100%;

使得middle占满一行
3、将left放在middle所在行的最左边,给left设置

margin-left:-100%;

4、left覆盖了middle内容的最左端,此时给container设置

padding:0 100px;

5、将left填充container最左边的空白部分,为left设置

position:relative;
left:-100px;

6、同理先给right设置

margin-left:-100px;

7、然后给right添加

position:relative;
right:-100px;

实现圣杯布局的代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>圣杯布局</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
    html,body{
        margin:0;
        padding:0;
    }
    .container{
        border:1px solid;
        padding:0 100px;
        width:500px;
    }
    .container:after{
        content:'';
        display: block;
        clear:both;
        height: 0;
    }
    .main{
        width:100%;
        height:300px;
        background-color: red;
        float:left;
    }
    .aside{
        width:100px;
        height:100px;
        background:blue;
        float:left;
        position: relative;
        left:-100px;
        margin-left:-100%;
    }
    .extra{
        width:100px;
        height:100px;
        float:left;
        background:yellow;
        position: relative;
        left:100px;
        margin-left:-100px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

二、双飞翼布局

双飞翼布局与圣杯布局不同的是,在中间重要的内容块里面再嵌套了一个div用于放内容,然后设置该div的margin,来达到三栏式的效果。

1、将三者均设置

float:left

2、将middle的宽度设置为

width:100%;

使得middle占满一行
3、将left放在middle所在行的最左边,给left设置

margin-left:-100%;

4、将right放到middle所在行的最右变,给right设置

margin-left:-100px;

5、middle的一部分给left和right覆盖了,给middle中添加

<div class="wrap"></div>

6、然后设置wrap

margin:0 110px;

双飞翼的代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>双飞翼布局</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
    html,body{
        margin:0;
        padding:0;
    }
    .container{
        border:1px solid;
        width:500px;
    }
    .container:after{
        content:'';
        display: block;
        clear:both;
        height: 0;
    }
    .middle{
        width:100%;
        height:300px;
        float:left;
    }
    .middle .wrap{
        background:pink;
        height:300px;
        margin-left: 100px;
        margin-right: 100px;
    }
    .left{
        width:100px;
        height:100px;
        background:blue;
        float:left;
        margin-left:-100%;
    }
    .right{
        width:100px;
        height:100px;
        float:left;
        background:yellow;
        margin-left:-100px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="middle">
            <div class="wrap"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

三、两个布局的异同

  • 1.两种布局方式都是把主列放在文档流最前面,使主列优先加载;
  • 2.两者在实现上的相同点在于都让三列浮动,然后通过负外边距形成三列布局;
  • 3.两种布局方式的不同在于如何处理中间主列的位置:圣杯布局是利用父容器的左右内边距定位;双飞翼布局是把主列嵌套在div后利用主列的左右外边距定位。

推荐阅读更多精彩内容