代码：
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 }
声明：
请尊重博客园原创精神，转载或使用图片请注明：
博主：xing.org1^
出处：http://www.cnblogs.com/padding1015/