首页 > 代码库 > 多种方法实现自适应布局
多种方法实现自适应布局
最近切了几个手机端的网页，第一次切的是美团的首页，为了自适应不同的手机分辨率，需要用到自适应布局，切图的时候是用的第一中方法，用到了定位，后来查找了一些其他方法，现在就介绍几种自适应布局的实现方法：
美团网页头就用到了自适应
地址：”长沙“，右边的”我的“是固定宽度，不会因分辨率不同而改变大小，中间内容自适应；这里就用三个div来代替表示吧。
html部分：
1 <div class="main"> 2 <div class="div1">1</div> 3 <div class="div2">2</div> 4 <div class="div3">3</div> 5 </div>
方法一：使用定位的方法将左右两边的内容固定在固定位置，中间内容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为最新版本，最新的主流浏览器基本上都支持
多种方法实现自适应布局