欢迎光临
我们一直在努力

CSS | CSS布局之双飞燕布局

圣杯布局双飞翼布局解决的问题是一样的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。圣杯布局和双飞翼布局解决问题的方案在前一半是相同的,也就是三栏全部float浮动,然后左右两栏加上负margin值让其跟中间栏div并排,以形成三栏布局。

不同在于解决”中间栏div内容不被遮挡“问题的思路不一样:

圣杯布局,为了中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div。

双飞翼布局,为了中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,在该子div里用margin-left和margin-right为左右两栏div留出位置
多了1个div,少用大致4个css属性。

简单说起来就是:双飞翼布局比圣杯布局多创建了一个div,但不用相对布局了,取而代之的是通过对内部的div添加margin-left和margin-right属性为双翼留出空间。

CSS代码部分如下:

*{margin: 0;padding: 0;}
.header,.footer{
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background-color: #bbb;
}

.main,.left,.right{
	float: left;
	min-height: 300px;
}

.main{
	width: 100%;
	background-color: lightcoral;
}
.main_in{
	background-color: green;
	margin-left: 200px;
	margin-right: 220px;
	min-height: 300px;
}

.left{
	margin-left: -100%;
	background-color: lightblue;
	width: 200px;
}
.right{
	margin-left: -220px;
	background-color: lightgrey;
	width: 220px;
}

.footer{
	clear: both;
}

HTML代码部分如下:

<div class="header">
	HEADER
</div>

<div class="main">
	<div class="main_in">
		<p>这是Main内容</p>
	</div>
</div>

<div class="left">
	<p>这是Left内容</p>
</div>

<div class="right">
	<p>这是Right内容</p>
</div>

<div class="footer">
	FOOTER
</div>
赞(2) 打赏
未经允许不得转载:散人研 » CSS | CSS布局之双飞燕布局
分享到: 更多 (0)

评论 抢沙发

8 + 3 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏