三栏布局,顾名思义就是两边固定,中间自适应。三栏布局在开发十分常见,那么什么是三栏布局?比如我打开京东的首页:
映入眼帘的就是一个常见的三栏布局:即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应。
下面围绕的这样的目的,即左右模块固定宽度,中间模块随浏览器变化自适应,想要完成的最终效果如下图所示:
红色和蓝色宽度固定,绿色宽度自适应,下面七种方法实现的最终效果跟这个差不多,可能会稍有不同。
下面七种技巧各有千秋,在开发中可以根据实际需求选择适合自己的方法进行编码。
1.流体布局
="en">
.left{
float:left;
height:200px;
width:100px;
background-color:red;}
.right{
width:200px;
height:200px;
background-color:blue;
float:right;}
.main{
margin-left:120px;
margin-right:220px;
height:200px;
background-color:green;}
="container">
="left">