CSS-三栏响应式布局（左右固宽，中间自适应）的五种方法

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

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