这种布局方式除了是很常见的面试题，更重要的，他还是很常见的一种页面布局。因此必须要掌握几种制作情况。

这里我先列出几种我总结的，可能有些不足，希望大家也可以留言补充，我再整理成更完善的。

 

在分条展示实现方案前，我先把通用的css贴一下：

*{  margin: 0;  padding: 0;}html{  font-family: "微软雅黑";}ul li{  list-style: none;}a:link,a:hover{  text-decoration: none;}.clearfix{  *zoom:1;}.clearfix:after{  height: 0;  clear: both;  content: "";  visibility: hidden;  display: block;}.fl{  float: left;}.fr{  float: right;}h3,.tips-info{  margin: 8px 0;  font-size: 14px;}li{  margin-bottom: 10px}.tips,ol{  background: #fffbfb;  padding: 10px 20px;}.tips-ex{  font-size: 12px;  color: #99c1c1;}.block{  padding: 10px 20px;  border-top: 5px solid #99c1c1;  margin: 30px 0 0px;  background: #f5f5f5;}.browser,.container{  padding: 20px;  }.container{  font-size: 14px;}.container,.img-box{  background: #eee;  border: 1px solid #999;}.box{  background: #fff;  padding: 20px;  border: 1px solid #999;}.team-box{  width: 158px;}.info-box{}.person-box{  width: 78px;}.person-box .img-box{  margin-bottom: 20px;}.person-box .img-box:last-child{  margin: 0;}.img-box{  width: 78px;}.img-txt{  line-height: 20px;  margin: 20px 0;  text-align: center;  padding: 0 5px;}.team-name{  width: 78px;  height: 80px;  text-align: center;}

主要是以下几种方案基础代码、无关痛痒的样式代码和左中右三栏各自需要提前固定的尺寸代码。

 

以下分几种情况实现：

第一种，float布局实现

这绝对是我大脑能第一下想到的！

左右两栏分别左浮动、右浮动。

中间栏使用margin/padding撑开左右两栏需要占据的位置即可。

代码：

html：

1 
     
       2     
      
        3         
       
         4             
        
          5                 
         
          团队logo 80x80
         
 6             
        
 7             
        
         团队名称
        
 8         
       
 9         
       
        10             
        
         11                 
         
          个人logo 80x80
         
12             
        
13             
        
         14                 
         
          个人logo 80x80
         
15             
        
16             
        
         17                 
         
          个人logo 80x80
         
18             
        
19             
        
         20                 
         
          个人logo 80x80
         
21             
        
22         
       
23         
       
        24             
        
         25                 
         
关于你们团队的介绍
26                 
         可以给我们解释一下团队名称得来历，或是分别介绍你们的团队成员。（以下为示例）27                 
         
页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。index.json 是页面的配置文件：页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
28                 
         
又一个小标题
29                 
         
30                     页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。31                 
32             
        
33         
       
34     
      
35 
     

 

css关键点：

.f-cont .team-box,.img-box,.team-name{  float: left;}.f-cont .person-box{  float: right;}.f-cont .info-box,.p-cont .info-box{  margin: 0 140px 0 220px;}

　　

看下动态效果：

 

第二种，定位布局+margin

左右栏分别使用absolute定位，同float一样，左边的定位left 0，右边的定位right 0；

中间还是用margin或padding撑开左右栏需要占据的位置即可。（利用了浮动或定位时，结构飘起来不占据文档空间的特点）

代码：

html：

1 
     
       2     
      
        3         
       
         4             
        
          5                 
         
          团队logo 80x80
         
 6             
        
 7             
        
         团队名称
        
 8         
       
 9         
       
        10             
        
         11                 
         
关于你们团队的介绍
12                 
         可以给我们解释一下团队名称得来历，或是分别介绍你们的团队成员。（以下为示例）13                 
         
页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。index.json 是页面的配置文件：页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
14                 
         
又一个小标题
15                 
         
16                     页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。17                 
18             
        
19         
       
20         
       
        21             
        
         22                 
         
          个人logo 80x80
         
23             
        
24             
        
         25                 
         
          个人logo 80x80
         
26             
        
27             
        
         28                 
         
          个人logo 80x80
         
29             
        
30             
        
         31                 
         
          个人logo 80x80
         
32             
        
33         
       
34     
      
35 
     

 

css：

.p-cont{  position: relative;  height: 430px;}.p-cont .team-box,.p-cont .person-box{  position: absolute;  top: 20px;  z-index: 9;}.p-cont .team-box{  left: 20px;}.p-cont .person-box{  right: 20px;}

　　

不足：

不过这种布局有点缺点就是，父元素需要设置固定高度，中间自适应时，如果内容过多而宽度又过窄，会导致高度被迫增加，严重时冲破父元素高度，产生溢出的现象：

第三种，display-table 实现

父元素display：table；

左右子元素使用display：table-cell；

中间正常文档流，margin撑开间距即可

代码：

html：

     
    
      
        
       
            
        
            
         
                
          
           团队logo 80x80
          
            
         
            
         
          团队名称
         
        
        
        
       
        
       
            
        
                
         
关于你们团队的介绍
                
         可以给我们解释一下团队名称得来历，或是分别介绍你们的团队成员。（以下为示例）                
         
页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。index.json 是页面的配置文件：页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
                
         
又一个小标题
                
         
                    页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。                
            
        
        
       
        
       
            
        
            
         
                
          
           个人logo 80x80
          
            
         
            
         
                
          
           个人logo 80x80
          
            
         
            
         
                
          
           个人logo 80x80
          
            
         
            
         
                
          
           个人logo 80x80
          
            
         
        
        
        
       
    
      
     

 

css：

.d-cont{  display: table;}.d-cont .cell{  display: table-cell;  vertical-align: top;}.d-cont .info-box{  margin: 0 20px;}

　　

看下效果：

第四种，浮动 + margin负边距

代码：

html：

1 
     
       2     
      
        3         
       
         4             
        
          5                 
         
           6                     
          
关于你们团队的介绍
 7                     
          可以给我们解释一下团队名称得来历，或是分别介绍你们的团队成员。（以下为示例） 8                     
          
页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。index.json 是页面的配置文件：页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
 9                     
          
又一个小标题
10                     
          
11 页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。12 
13                 
         
14             
        
15         
       
16         
       
        17             
        
         18                 
         
          19                     
          
           团队logo 80x80
          
20                 
         
21                 
         
          团队名称
         
22             
        
23         
       
24         
       
        25             
        
         26                 
         
          27                     
          
           个人logo 80x80
          
28                 
         
29                 
         
          30                     
          
           个人logo 80x80
          
31                 
         
32                 
         
          33                     
          
           个人logo 80x80
          
34                 
         
35                 
         
          36                     
          
           个人logo 80x80
          
37                 
         
38             
        
39         
       
40     
      
41 
     

 

css：

.m-l,.m-c,.m-r{  float: left;}.m-l{  margin-left: -100%;}.m-c{  margin: 0 140px 0 220px;}.m-r{  margin-left: -120px;}

　　

效果：

第五种，css3 - flex

代码：

html：

1 
     
       2     
      
        3         
       
         4             
        
          5                 
         
           6                     
          
           团队logo 80x80
          
 7                 
         
 8                 
         
          团队名称
         
 9             
        
10         
       
11         
       
        12             
        
         13                 
         
          14                     
          
关于你们团队的介绍
15                     
          可以给我们解释一下团队名称得来历，或是分别介绍你们的团队成员。（以下为示例）16                     
          
页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。index.json 是页面的配置文件：页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
17                     
          
又一个小标题
18                     
          
19 页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。20 
21                 
         
22             
        
23         
       
24         
       
        25             
        
         26                 
         
          27                     
          
           个人logo 80x80
          
28                 
         
29                 
         
          30                     
          
           个人logo 80x80
          
31                 
         
32                 
         
          33                     
          
           个人logo 80x80
          
34                 
         
35                 
         
          36                     
          
           个人logo 80x80
          
37                 
         
38             
        
39         
       
40     
      
41 
     

 

css：

.fx-cont{  display: -webkit-flex;  display: flex;}.fx-cont .info-box{  flex: 1;  margin: 0 20px;}

　　

 

 

 

 

 

 

 

 

整篇源代码：

1   2   3   4   5   
        6   
        7   
        8   
        9    10   
       11  12  13  14   
       15   
第一种方法-float
 16   
      
        17     
       
关键点
 18     
       
         19       
        
结构顺序：左，中，右
 20       
        
中间盒模型的margin-left、margin-right分别是左右盒模型的宽度、障眼法:中间盒模型使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。
 21       
        
注意，结构上，左边盒模型、右边盒模型、中间盒模型
 22     
       
 23   
      
 24   
      
        25     
       
         26       
        
          27         
         
           28           
          
           团队logo 80x80
          
 29         
         
 30         
         
          团队名称
         
 31       
        
 32       
        
          33         
         
           34           
          
           个人logo 80x80
          
 35         
         
 36         
         
           37           
          
           个人logo 80x80
          
 38         
         
 39         
         
           40           
          
           个人logo 80x80
          
 41         
         
 42         
         
           43           
          
           个人logo 80x80
          
 44         
         
 45       
        
 46       
        
          47         
         
           48           
          
关于你们团队的介绍
 49           
          可以给我们解释一下团队名称得来历，或是分别介绍你们的团队成员。（以下为示例） 50           
          
页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 51             中指定的样式规则。index.json 是页面的配置文件：页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 52             中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
 53           
          
又一个小标题
 54           
          
 55             页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。 56           
 57         
         
 58       
        
 59     
       
 60   
      
 61  62   
       63   
第二种方法-position+margin
 64   
      
        65     
       
关键点
 66     
       
         67       
        
结构顺序：左，中，右
 68       
        
position:absolute;之后的父元素塌陷
 69     
       
 70   
      
 71   
      
        72     
       
缺点
 73     
       
         74       
        
父元素设置固定高度，中间结构超出高度会溢出
 75     
       
 76   
      
 77   
      
        78     
       
         79       
        
          80         
         
           81           
          
           团队logo 80x80
          
 82         
         
 83         
         
          团队名称
         
 84       
        
 85       
        
          86         
         
           87           
          
关于你们团队的介绍
 88           
          可以给我们解释一下团队名称得来历，或是分别介绍你们的团队成员。（以下为示例） 89           
          
页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 90             中指定的样式规则。index.json 是页面的配置文件：页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 91             中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
 92           
          
又一个小标题
 93           
          
 94             页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。 95           
 96         
         
 97       
        
 98       
        
          99         
         
          100           
          
           个人logo 80x80
          
101         
         
102         
         
          103           
          
           个人logo 80x80
          
104         
         
105         
         
          106           
          
           个人logo 80x80
          
107         
         
108         
         
          109           
          
           个人logo 80x80
          
110         
         
111       
        
112     
       
113   
      
114 115   
      116   
第三种方法--display：table-cell
117   
      
       118     
       
关键点
119     
       
        120       
        
结构顺序：左，中，右
121       
        
父元素display:table;
122       
        
左右两个子元素display：table-cell；vertical-align：center，中间盒子不用管。
123       
        
左右两个子元素加一个包裹，因为高度会盛满父元素
124 125       
        
display：table-cell；——不支持ie6,7
126     
       
127   
      
128   
      
       129     
       
        130       
        
         131         
         
          132           
          
           133             
           
            团队logo 80x80
           
134           
          
135           
          
           团队名称
          
136         
         
137       
        
138       
        
         139         
         
          140           
          
关于你们团队的介绍
141           
          可以给我们解释一下团队名称得来历，或是分别介绍你们的团队成员。（以下为示例）142           
          
页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss143             中指定的样式规则。index.json 是页面的配置文件：页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window144             中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
145           
          
又一个小标题
146           
          
147             页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。148           
149         
         
150       
        
151       
        
         152         
         
          153           
          
           154             
           
            个人logo 80x80
           
155           
          
156           
          
           157             
           
            个人logo 80x80
           
158           
          
159           
          
           160             
           
            个人logo 80x80
           
161           
          
162           
          
           163             
           
            个人logo 80x80
           
164           
          
165         
         
166       
        
167     
       
168   
      
169   
      170   
第4种方法--圣杯布局【margin负边距布局】
171   
      
       172     
       
关键点
173     
       
        174       
        
结构上，中间盒模型在前面【重要】，左右两边的顺序随意，但最好是中，左，右的顺序来。
175       
        
三个模块外边都要加一个父元素-包裹用的div，这个父div的float：left；【三个都有左浮动】
176       
        
中间盒模型margin-left、margin-right等于左右结构的宽度，
177       
        
左边父div的margin-left:-100%;178         100%的来源，其实是中间盒模型的宽度.这里我中间没设置宽度所以就是100%179       
180       
        
右边父div的margin-left:-盒子宽度px;181         右边只需要向左移动自己宽度的大小就能回到原位置。182       
183       
        
最外边清楚浮动
184     
       
185   
      
186   
      
       187     
       
        188       
        
         189         
         
          190           
          
           191             
           
关于你们团队的介绍
192             
           可以给我们解释一下团队名称得来历，或是分别介绍你们的团队成员。（以下为示例）193             
           
页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss194 中指定的样式规则。index.json 是页面的配置文件：页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window195 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
196             
           
又一个小标题
197             
           
198 页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。199 
200           
          
201         
         
202       
        
203       
        
         204         
         
          205           
          
           206             
           
            团队logo 80x80
           
207           
          
208           
          
           团队名称
          
209         
         
210       
        
211       
        
         212         
         
          213           
          
           214             
           
            个人logo 80x80
           
215           
          
216           
          
           217             
           
            个人logo 80x80
           
218           
          
219           
          
           220             
           
            个人logo 80x80
           
221           
          
222           
          
           223             
           
            个人logo 80x80
           
224           
          
225         
         
226       
        
227     
       
228   
      
229   
      230   
第5种方法--css3 flex
231   
      
       232     
       
关键点
233     
       
        234       
        
结构顺序：左，中，右
235       
        
三个盒子分别需要给一个div外包裹，好让内部的实际内容高度自定义。因为用了flex和用了table-cell感觉一样，高度会和父元素高度一致
236       
        
三个盒子的父元素设置display：flex；
237       
        
中间盒子设置flex： 1；让他填充父元素剩下的地方.并根据需要设置边距和左右隔开
238     
       
239   
      
240   
      
       241     
       
        242       
        
         243         
         
          244           
          
           245             
           
            团队logo 80x80
           
246           
          
247           
          
           团队名称
          
248         
         
249       
        
250       
        
         251         
         
          252           
          
           253             
           
关于你们团队的介绍
254             
           可以给我们解释一下团队名称得来历，或是分别介绍你们的团队成员。（以下为示例）255             
           
页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss256 中指定的样式规则。index.json 是页面的配置文件：页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window257 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
258             
           
又一个小标题
259             
           
260 页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。261 
262           
          
263         
         
264       
        
265       
        
         266         
         
          267           
          
           268             
           
            个人logo 80x80
           
269           
          
270           
          
           271             
           
            个人logo 80x80
           
272           
          
273           
          
           274             
           
            个人logo 80x80
           
275           
          
276           
          
           277             
           
            个人logo 80x80
           
278           
          
279         
         
280       
        
281     
       
282   
      
283 284 285 

1 /*  2  * @Author: @Guojufeng   3  * @Date: 2017-09-05 12:58:07  4  * @Last Modified by: @Guojufeng  5  * @Last Modified time: 2018-12-11 11:51:48  6  */  7 *{  8   margin: 0;  9   padding: 0; 10 } 11 html{ 12   font-family: "微软雅黑"; 13 } 14 ul li{ 15   list-style: none; 16 } 17 a:link,a:hover{ 18   text-decoration: none; 19 } 20 .clearfix{ 21   *zoom:1; 22 } 23 .clearfix:after{ 24   height: 0; 25   clear: both; 26   content: ""; 27   visibility: hidden; 28   display: block; 29 } 30 .fl{ 31   float: left; 32 } 33 .fr{ 34   float: right; 35 } 36 h3,.tips-info{ 37   margin: 8px 0; 38   font-size: 14px; 39 } 40 li{ 41   margin-bottom: 10px 42 } 43 .tips,ol{ 44   background: #fffbfb; 45   padding: 10px 20px; 46 } 47 .tips-ex{ 48   font-size: 12px; 49   color: #99c1c1; 50 } 51 .block{ 52   padding: 10px 20px; 53   border-top: 5px solid #99c1c1; 54   margin: 30px 0 0px; 55   background: #f5f5f5; 56 } 57 .browser,.container{ 58   padding: 20px; 59    60 } 61 .container{ 62   font-size: 14px; 63 } 64 .container,.img-box{ 65   background: #eee; 66   border: 1px solid #999; 67 } 68 .box{ 69   background: #fff; 70   padding: 20px; 71   border: 1px solid #999; 72 } 73 .team-box{ 74   width: 158px; 75 } 76 .info-box{ 77  78 } 79 .person-box{ 80   width: 78px; 81 } 82 .person-box .img-box{ 83   margin-bottom: 20px; 84 } 85 .person-box .img-box:last-child{ 86   margin: 0; 87 } 88 .img-box{ 89   width: 78px; 90 } 91 .img-txt{ 92   line-height: 20px; 93   margin: 20px 0; 94   text-align: center; 95   padding: 0 5px; 96 } 97 .team-name{ 98   width: 78px; 99   height: 80px;100   text-align: center;101 }102 /* others */103 .top{104   margin-top: 150px;105 }106 .bottom{107   margin-bottom: 150px;108 }109 110 /*不同*/111 .f-cont .team-box,.img-box,.team-name{112   float: left;113 }114 .f-cont .person-box{115   float: right;116 }117 .f-cont .info-box,.p-cont .info-box{118   margin: 0 140px 0 220px;119 }120 /*2*/121 .p-cont{122   position: relative;123   height: 430px;124 }125 .p-cont .team-box,.p-cont .person-box{126   position: absolute;127   top: 20px;128   z-index: 9;129 }130 .p-cont .team-box{131   left: 20px;132 }133 .p-cont .person-box{134   right: 20px;135 }136 /*3*/137 .d-cont{138   display: table;139 }140 .d-cont .cell{141   display: table-cell;142   vertical-align: top;143 }144 .d-cont .info-box{145   margin: 0 20px;146 }147 /*4*/148 .m-l,.m-c,.m-r{149   float: left;150 }151 .m-l{152   margin-left: -100%;153 }154 .m-c{155   margin: 0 140px 0 220px;156 }157 .m-r{158   margin-left: -120px;159 }160 /*5*/161 .fx-cont{162   display: -webkit-flex;163   display: flex;164 }165 .fx-cont .info-box{166   flex: 1;167   margin: 0 20px;168 }

 

 

 

声明：

　　请尊重博客园原创精神，转载或使用图片请注明：

　　博主：xing.org1^

　　出处：http://www.cnblogs.com/padding1015/