双飞翼布局(三列布局实现两侧固定,中间自适应)
双飞翼布局(三列布局实现两侧固定,中间自适应)
案例要求
实现一个三列布局:
- 布局为左中右三部分
- 左右两侧的宽度固定
- 中间内容区宽度能够自适应
双飞翼布局实现流程概要
- 第一步:使用float属性让左中右三列浮动
- 第二步:使用负margin属性让左右两列与中间列处于同一水平线上
- 第三步:在中间列增加一个div内容元素,设置margin值为左右两列的宽度
- 第四步:清除浮动,使父元素高度正常显示
注意细节点
左中右三个盒子的顺序有要求
<div class="center"> //此处注意三个盒子的顺序,要先写中间的盒子
<div class="content">自适应内容区</div>
</div>
<div class="left"></div>
<div class="right"></div>
- 两侧的div实际上时覆盖在中间div的上层显示的,所以要使中间div首先显示,且宽度为100%
负margin属性的使用
当三个盒子都浮动后如图:
若使盒子处于同一水平线上使用负margin:
- 对于left盒子,要在内容区的左侧显示,margin-left值为-100%(center的宽度);
- 对于right盒子,要显示在内容区右侧,margin-left值为负自己本身的宽度。(-200px);
中间列内容元素的显示
当三个盒子同处于一个水平线后,内容区显示的内容会被两侧盒子覆盖,故要设置内容区的左右margin,值为两侧盒子的宽度;
.content{
margin: 0px 200px; //内容区左右margin值为两侧的宽度
}
详细代码
<title>双飞翼布局</title>
<style>
.box{
border: 1px solid red;
width:800px;
margin:0 auto;
overflow: hidden;
}
.center{
float: left;
width: 100%;
height:500px;
background-color: #4c8045;
}
.left{
float: left;
background-color: #dba893;
width: 200px;
height: 500px;
margin-left: -100%; //要保证三个盒子在同一水平线,且左侧盒子在中间盒子的左侧
}
.right{
float: left;
background-color:#788a74;
width:200px;
height:500px;
margin-left: -200px; //margin值为右侧盒子自身的宽度
}
.content{
margin: 0px 200px; //内容区左右margin值为两侧的宽度
}
</style>
</head>
<body>
<div class="box">
<div class="center"> //此处注意三个盒子的顺序,要先写中间的盒子
<div class="content">自适应内容区</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>