最近切了几个手机端的网页，第一次切的是美团的首页，为了自适应不同的手机分辨率，需要用到自适应布局，切图的时候是用的第一中方法，用到了定位，后来查找了一些其他方法，现在就介绍几种自适应布局的实现方法：

美团网页头就用到了自适应

地址：”长沙“，右边的”我的“是固定宽度，不会因分辨率不同而改变大小，中间内容自适应；这里就用三个div来代替表示吧。

html部分：

1 
     
      2             
      
       1
      
3             
      
       2
      
4             
      
       3
      
5         
     

方法一：使用定位的方法将左右两边的内容固定在固定位置，中间内容width=100%,并左右margin出相应的位置放置绝对定位在该区域的‘东西’;

1         *{ 2             padding: 0; 3             margin: 0; 4         } 5         .main{ 6             height: 30px; 7             position: relative; 8         } 9         .div1{10             width: 30px;11             height: 30px;12             background: blue;13             float: left;14             position: absolute;//相对其父元素定位15             left: 0;16             top: 0;17         }18         .div2{19             width: 100%;20             height: 30px;21             background: green;22             float: left;23             margin: 0 30px;24         }25         .div3{26             width: 30px;27             height: 30px;28             background: red;29             float: left;30             position: absolute;31             right: 0;32             top: 0;33         }

方法二：使用dispaly:table;作为块级表格来显示（类似 <table>,根据内容来自适应）

1、设置父级元素dispaly:table；

2、左右两边给定固定宽度或用内容自动撑开；

3、左右两边设置dispaly:table-cell；

CSS代码如下：

1 * { 2             margin: 0; 3             padding: 0; 4         } 5         .main { 6             display: table; 7         } 8         .div1,.div3{ 9             width: 100px;10             height: 300px;11             display: table-cell;12         }13         .div1 {14             background: red;15         }        16         .div2 {17             background: blue;18             height: 300px;19             20         }        21         .div3 {22             background: black;23         }

 

方法二：使用dispaly:flex;

1、设置父级元素dispaly:table；

2、左右两边给定固定宽度；

3、需要自适应的中间部分设置flex=1；

1 * { 2             margin: 0; 3             padding: 0; 4         } 5         .main { 6             display: flex; 7         } 8         .div1,.div3{ 9             width: 100px;10             height: 300px;11         }12         .div1 {13             background: red;14         }        15         .div2 {16             background: blue;17             height: 300px;18             flex: 1;19         }        20         .div3 {21             background: black;22         }

备注：

1、对于方法三，如果需要多列都自适应，可以分别设置flex，将按按比例进行自适应；如

.div1,.div3{

flex: 1;

height: 300px;

}

.div1,.div3 均设置flex: 1;三个div将各占父元素的三分之一的宽度，如果需要设置竖向自适应，父元设置flex-flow:clumn;

2、对于方法三，可以父元素使用display:box;或者父元素使用display:flexbox;但不同浏览器需要加上不同的前缀来进行兼容；display:box为最老版本，display:flexbox为过渡版本，dispaly:flex为最新版本，最新的主流浏览器基本上都支持