CSS 双飞翼布局

10 Jul 2016

» CSS

双飞翼布局：总共分三栏，左侧栏Left，中间主栏Main，右侧栏Right

第一步，建立三个div，不过注意，中间Main需要加一个wrap div. 整个结构看起来是这样的：

<style type="text/css">

	.mainWrap-1

	{

		width: 100%;

		background: #ccc;

	}

	.main-1

	{

		margin-left: 210px; /*左侧栏的宽度为200px，此处设置为210px，是为了留出10px的间隔*/

		margin-right: 310px;/*左侧栏的宽度为300px，此处设置为310px，是为了留出10px的间隔*/

		background: #c33;

	}

	.left-1

	{

		width: 200px;

		height: 300px;

		background: skyblue;

	}

	.right-1

	{

		width: 300px;

		height: 300px;

		background: green;

	}

</style>

<div class="mainWrap-1">	<div class="main-1"></div></div>

<div class="left-1"></div>

<div class="right-1"></div>

.mainWrap-1
{
width: 100%;
background: #ccc;
}
.main-1
{
margin-left: 210px; /*左侧栏的宽度为200px，此处设置为210px，是为了留出10px的间隔*/
margin-right: 310px;/*左侧栏的宽度为300px，此处设置为310px，是为了留出10px的间隔*/
background: #c33;
height: 100px;
color: #fff;
}
.left-1
{
width: 200px;
height: 100px;
background: skyblue;
color: #fff;
}
.right-1
{
width: 300px;
height: 100px;
background: green;
color: #fff;
}

.clearFloat
{
clear: both;
}

Main,
margin-left:210px;
margin-right:310px;

大专栏  CSS 双飞翼布局iv class="left-1">Left
width:200px;

Right
width:300px;

看起来很混乱，对不对？

第二步：动起来！

A, mainWrap,left和right添加float：left；注意，main不添加！！
B, left 左移动100%的宽度：margin-left:-100%;
C, right左移动自身的宽度：margin-left:-300px;

.mainWrap-2
{
width: 100%;
background: #ccc;
float: left;
margin-bottom: 50px;
}
.main-2
{
margin-left: 210px; /*左侧栏的宽度为200px，此处设置为210px，是为了留出10px的间隔*/
margin-right: 310px;/*左侧栏的宽度为300px，此处设置为310px，是为了留出10px的间隔*/
background: #c33;
height: 100px;
color: #fff;
}
.left-2
{
width: 200px;
height: 100px;
background: skyblue;
color: #fff;float: left;
margin-left: -100%;

}
.right-2
{
width: 300px;
height: 100px;
background: green;
color: #fff;
float: left;
margin-left: -300px;
}

Main

Left
float:left;
margin-left:-100%;

Right
float:left;
margin-left:-300px;

这就是双飞翼布局了！左右两侧宽度固定，中间主栏宽度自适应，而且，优先加载中间主栏内容，用户体验更好！

双飞翼布局，你值得拥有！

Share this on →  

Tweet