圣杯布局和双飞翼布局

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

大家可能或多或少都听过圣杯和双飞翼布局吧，如果你未曾学过或者已经忘了，那就看看这篇文章吧！ 具体操作步骤都在代码注释中哦，相信大家能很容易地看懂！

圣杯布局

/*1. 搞一个容器，里面三个盒子
	并且在中间盒子中再加一个盒子
<div class="box">
	<div class="center">
		<div class="center-in"></div>
	</div>
	<div class="left"></div>
	<div class="right"></div>
</div>
*/

/*2. 设置两边盒子的宽度*/
.left, .right{
    width: 200px;
    height: 200px;
    background-color: red;
    /*5.float: left;*/
}

/*3.设置中间盒子宽度为100%*/
.center{
    width: 100%;
    height: 200px;
    background-color: skyblue;
    /*5.float: left;*/
}

/*4.设置容器的padding为两边盒子的宽度*/
.box{
    padding: 0 200px;
}

/*5.让三个盒子在同一方向浮动*/


.left{
    /*6.设置左边盒子 margin-left: -100%;*/
    margin-left: -100%;
    /*7.通过定位使左边盒子不盖住中间的*/
    position: relative;
    left: -200px;
}

.right{
    /*8.设置右边盒子的margin-left: -自身宽度*/
    margin-left: -200px;
    /*9. 通过定位使右边盒子不盖住中间的*/
    position: relative;
    left: 200px;
}

/*10.设置最小宽度防止缩太小出问题*/
.box{
    min-width: 400px;
}

效果如下：（当页面变小时中间部分会缩小，而两边大小没有变化）

双飞翼布局

/*1. 搞一个容器，里面三个盒子
<div class="box">
	<div class="center"></div>
	<div class="left"></div>
	<div class="right"></div>
</div>
*/

/*2. 设置两边盒子的宽度*/
.left, .right{
    width: 200px;
    height: 200px;
    background-color: red;
    /*5.float: left;*/
}

/*3.设置中间盒子宽度为100%*/
.center{
    width: 100%;
    height: 200px;
    background-color: skyblue;
    /*5.float: left;*/
}

/*4.设置中间的里面盒子左右margin为两边盒子宽度*/
.center>.center-in{
    margin: 0 200px;
    height: 200px;
    background-color: yellowgreen;
}

/*5.让三个盒子在同一方向浮动*/

/*6.设置两边盒子位置*/
.left{
    /*7.设置左边盒子 margin-left: -100%;*/
    margin-left: -100%;
}
.right{
     /*8.设置右边盒子的margin-left: -自身宽度*/
    margin-left: -200px;
}

效果图片如下：（发现和圣杯布局的效果其实是一样的）

本文就到这里了，讲了两个简单的布局方式，希望能给大家带来收获。