CSS双飞翼布局是一种经典的三栏布局方案。它既可以实现左侧、右侧栏固定宽度,中间自适应宽度,也可以实现左侧、右侧栏宽度自适应,中间固定宽度。本文将介绍CSS双飞翼布局的实现方式。
首先,我们需要一个HTML结构,在body中定义一个wrapper容器,包含三个子容器,分别是left、right和center。其中,left和right容器设置固定宽度,center容器设置margin-left、margin-right为左侧、右侧栏的宽度。代码如下:
<div class="wrapper"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div>
接着,为left、center、right容器设置CSS样式。首先,需要将所有容器设置为左浮动,以便在同一行内排列。其次,设置left、right容器的固定宽度,center容器的margin-left、margin-right为左侧、右侧栏的宽度。最后,为center容器设置一个更大的z-index,以确保它在屏幕上的显示顺序比left、right容器高。代码如下:
.wrapper { overflow: hidden; } .left,.center,.right { float: left; } .left { width: 200px; margin-left: -100%; position: relative; left: -200px; } .center { width: 100%; margin-left: 200px; margin-right: 200px; z-index: 1; } .right { width: 200px; margin-right: -100%; position: relative; right: -200px; }
最后,我们需要为wrapper容器设置一个背景色或者背景图片,以充分利用left、right容器在center容器之下的区域。代码如下:
.wrapper { background-color: #EEE; }
至此,CSS双飞翼布局完成。我们可以根据实际需求调整left、right容器的宽度,来实现不同的布局效果。