前端进阶——双飞翼布局与圣杯布局中关于三栏宽度的问题

  暑假如期而至，但学习前端却不能因此停止。工作室为了提高我们对前端的理解与运用特地在暑期开了个短期培训，这里表示感谢。废话不多说，这里说一下在理解双飞翼布局和圣杯布局时在设置三栏宽度的问题。

  若想实现若下图的效果有很多方法，今天就从双飞翼布局和圣杯布局来实现：

（左栏占30%，右栏占20%）

一、双飞翼布局：

<div id="wrap">
	<div class="main">
		<div class="mainin">main ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div>
	</div>
	<div class="left">left</div>
	<div class="right">right</div>
</div>

     1）用px设置左右两栏宽度（代码如下）：

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	div div{
		height: 200px;
		float: left;
	}
	.wrap{
		background: gray;
	}
	.main{
		width: 100%;
		background: yellow;
	}
	.left{
		width: 460px;
		background: purple;
		margin-left: -100%;
	}
	.right{
		width: 307px;
		background: green;
		margin-left: -307px;
	}
	.mainin{
		background: red;
		word-break: break-all;  /*连续的长串英文字母自动换行*/
		margin: 0 307px 0 460px;
	}
</style>

  2）用百分比设置左右两栏的宽度（代码如下）：

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	div div{
		height: 200px;
		float: left;
	}
	.wrap{
		background: gray;
	}
	.main{
		width: 100%;
		background: yellow;
	}
	.left{
		width: 30%;
		background: purple;
		margin-left: -100%;
	}
	.right{
		width: 20%;
		background: green;
		margin-left: -20%;
	}
	.mainin{
		background: red;
		word-break: break-all;
		margin: 0 20% 0 30%;
	}
</style>

二、圣杯布局：

<div id="body">
		<div class="main">main啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</div>
		<div class="left">left</div>
		<div class="right">right</div>
</div>

  1）用px设置左右两栏宽度（代码如下）：

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	#body{
		padding: 0 307px 0 460px;
	}
	#body div{
		height: 200px;
		float: left;
	}
	.main{
		background: red;
		width: 100%;
		word-break: break-all;
	}
	.left{
		background: purple;
		width: 460px;
		margin-left: -100%;
		position: relative;
		left: -460px;
	}
	.right{
		background: green;
		width: 307px;
		margin-left: -307px;
		position: relative;
		right: -307px;
	}
</style>

  2）用百分比设置左右两栏宽度（代码如下）：

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	#body{
		padding: 0 20% 0 30%;
	}
	#body div{
		height: 200px;
		float: left;
	}
	.main{
		background: red;
		width: 100%;
		word-break: break-all;
	}
	.left{
		background: purple;
		width: 30%;
		margin-left: -100%;
		position: relative;
		left: -30%;
	}
	.right{
		background: green;
		width: 20%;
		margin-left: -20%;
		position: relative;
		right: -20%;
	}
</style>

  可能有好些人和我刚开始一样，认为把设置为px的值换为百分比就可以了，可是当你打开浏览器时结果是这样的：

当时我也是很纳闷，可仔细想了想百分比的含义：

  所以要想实现左右两栏分别为30%和20%，应该原有的值*2，代码如下：

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	#body{
		padding: 0 20% 0 30%;
	}
	#body div{
		height: 200px;
		float: left;
	}
	.main{
		background: red;
		width: 100%;
		word-break: break-all;
	}
	.left{
		background: purple;
		width: 60%;
		margin-left: -100%;
		position: relative;
		left: -60%;
	}
	.right{
		background: green;
		width: 40%;
		margin-left: -40%;
		position: relative;
		right: -40%;
	}
</style>