经典布局方案之双飞翼布局

今天主要学习了一些经典的方案布局方法：

1、上中下一栏式

2、左右两栏式

3、左右两栏加页眉页脚

4、左中右三栏

5、左中右三栏页眉页脚

这里主要想总结一下左中右三栏的 双飞翼布局。

先贴上代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.wrap{
			margin: 0 auto;
			width: 80%;
		}
		#main{
			float: left;
			width: 100%;
			background: green;
		}
		#left{
			float: left;
			width: 200px;
			background: yellow;
			height: 800px;
			margin-left: -100%;
		}
		#right{
			float: left;
			width: 200px;
			background: yellow;
			height: 800px;
			margin-left: -200px;
		}
		.content{
			height: 800px;
			margin: 0 200px;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<section id="main">
			<div class="content">#main</div>
		</section>
		<aside id="left">#left</aside>
		<aside id="right">#right</aside>
	</div>
</body>
</html>

整个思路是：

1、首先在div中创造“大鸟”的身体section，然后随后跟上两个“翅膀”左和右。

2、三个元素都设置为float：left，大鸟身体宽度设置为100%，在浏览器中查看发现大鸟在上边占满了一整行，翅膀会被挤到下一行显示。

3、将左翅膀设置margin-left：-100%，把其推到上一行的相同位置。

4、将右翅膀设置margin-left：-（width），把其推到上一行的右边靠边位置。

注：这里虽然在浏览器中显示正常了，但是实际上翅膀下面还存在着被遮盖的部分，先考虑把main加margin或padding值，但是会造成布局错乱。

5、这里通过在main下再嵌套一层content，利用margin的传递，从content传递到父级main来控制父级的位置。

最后成功达到目的。

经典布局方案之双飞翼布局

猜你喜欢