你的位置:首页 > 软件开发 > 网页设计 > DIV+CSS 网页布局之:三列布局

DIV+CSS 网页布局之:三列布局

发布时间:2016-03-14 23:00:32
1、宽度自适应三列布局  三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局。  同样的道理,更多列的布局,其实和两列、三列的布局模式是一样的。 1 <!DOCTYPE html ...

1、宽度自适应三列布局

  三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局。

  同样的道理,更多列的布局,其实和两列、三列的布局模式是一样的。

 1 <!DOCTYPE html> 2 <html> 3 <head> 4   <meta charset="UTF-8"> 5   <title>三列布局</title> 6 <style> 7 *{margin:0;padding:0;} 8 #herder{ 9   height:50px;10   background:blue;11 }12 #main{13   width:100%;14   overflow:hidden;15 }16 #main .main-left{17   width:25%;18   height:800px;19   background:red;20   float:left;21 }22 #main .main-center{23   width:50%;24   height:800px;25   background:lightgreen;26   float:left;27 }28 #main .main-right{29   width:25%;30   height:800px;31   background:pink;32   float:right;33 }34 #footer{35   height:50px;36   background:gray;37 }38 </style>39 </head>40 <body>41 <div id="herder">页头</div>42 <div id="main">43   <div class="main-left">左列</div>44   <div class="main-center">中间</div>45   <div class="main-right">右列</div>46 </div>47 <div id="footer">页脚</div>48 </body>49 </html>

原标题:DIV+CSS 网页布局之:三列布局

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。