双飞翼式三栏布局

最新推荐文章于 2022-08-16 19:48:13 发布

await play;

最新推荐文章于 2022-08-16 19:48:13 发布

阅读量173

点赞数

本文链接：https://blog.csdn.net/qq_42469247/article/details/84328764

版权

如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方.其实跟圣杯布局差不多的，当然也可以改动一下

双飞翼式三栏布局的原理：

html：

设三栏id依次为，bone left right，与圣杯式三栏布局相似这个顺序也是固定的。但是与圣杯布局不同的是，不需要一个父级来包含它们。而且双飞翼布局需要给main中添加一个子div，给他起个名字叫做main。如下

<div class="bone">
		<div class="main">双飞翼三栏布局的鸟的身体</div>
</div>
<div class="left">双飞翼三栏布局的鸟的左翼</div>
<div class="right">双飞翼三栏布局的鸟的右翼</div>

至于为什么要设置main呢。我们将bone看做是鸟的骨架，不但有鸟的身体，还有鸟的翅膀，left right是左右翅膀，而main就是鸟儿的身体。

给bone的宽度设为100%；设置高度；加浮动；

设置main的padding或者margin为左右栏的宽度

给left right翅膀设置为固定的宽度，比如 100px；和浮动，

利用margin-left移动与bone平齐，如下

.left{;
	float: left;
	margin-left: -100%;
}					/*左翅膀，设置宽度，加上浮动，利用margin-left来回到第一行的起点*/
.right{
	float: left;
	margin-left: -100px;
}					/*右翅膀，设置宽度，加上浮动，利用margin-left来回到第一行的末尾*/

如果想要设置间隙，只需要将padding或者margin的两边像素增加即可

再次附上全部代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>双飞翼三栏布局</title>
	<!-- 如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方.其实跟圣杯布局差不多的，当然也可以改动一下（自己想想有哪些不同吧） -->
	<style>
		
		div{
			text-align: center;
		}
		.bone{
			width: 100%;
			height: 200px;
			float: left;
		}						/*main表示中间自适应区域，宽度设置成为百分之百，加上浮动*/
		.main{
			height: 200px;
			margin: 0 220px 0 220px;
			background: orange;
		}						/* main自适应div中添加内容的div，设置padding或者margin来达到使两边的区域不可用*/
		.left{
			width: 200px;
			height: 200px;
			background: green;
			float: left;
			margin-left: -100%;
		}						/*左翅膀，设置宽度，加上浮动，利用margin-left来回到第一行的起点*/
		.right{
			width: 200px;
			height: 200px;
			background: red;
			float: left;
			margin-left: -200px;
		}						/*右翅膀，设置宽度，加上浮动，利用margin-left来回到第一行的末尾*/
	</style>
</head>
<body>
	<div class="bone">
		<div class="main">双飞翼三栏布局的鸟的身体</div>
	</div>
	<div class="left">双飞翼三栏布局的鸟的左翼</div>
	<div class="right">双飞翼三栏布局的鸟的右翼</div>
</body>
</html>