首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS-三栏响应式布局(左右固宽,中间自适应)的五种方法

CSS-三栏响应式布局(左右固宽,中间自适应)的五种方法

作者头像
xing.org1^
发布2018-05-17 16:04:34
1.2K0
发布2018-05-17 16:04:34
举报
文章被收录于专栏:前端说吧前端说吧

代码:

  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/

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-09-05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档