div+css实现几种经典布局的详解

一、左右两侧，左侧固定宽度200px，右侧自适应占满

 

[html] 
 
  1.     <div class="divBox">  
  2.         <div class="left"></div>  
  3.         <div class="right"></div>  
  4.     </div>  
[css] 
 
  1.          
  2.         .divBox{  
  3.             height: 500px;  
  4.         }  
  5.         .left{  
  6.             float: left;  
  7.             width: 200px;  
  8.             height: 100%; 
  9.         }  
  10.         .right{  
  11.             margin-left: 200px;  
  12.             height: 100%;  
  13.         }  

这个实现起来比较的简单,左侧的div给浮动，右侧的divmargin-left使其从左侧div右侧开始展现,加背景颜色方便观察。

 

 

二、左中右三列，左右个200px固定，中间自适应占满

[html]
 
  1.     <div class="divBox">  
  2.         <div class="left"></div>  
  3.         <div class="right"></div>  
  4.         <div class="center"></div>  
  5.     </div>  
[css] 
 
  1.  .divBox{  
  2.     height: 500px;  
  3. }  
  4. .left{  
  5.     float: left;  
  6.     width: 200px;  
  7.     height: 100%;  
  8. }  
  9. .center{  
  10.     margin: 0 200px;
  11.     height: 500px;  
  12. }  
  13. .right{   
  14.     float: right;  
  15.     width: 200px;  
  16.     height: 100%;  
  17. }  

 

 

三、上中下三行，头部200px高，底部200px高，中间自适应占满

[html] 
  1. <div class="divBox">  
  2.     <div class="top"></div>  
  3.     <div class="center"></div>  
  4.     <div class="bottom"></div>  
  5. </div>  
[css] 
  1.         .divBox{  
  2.             width: 100%;  
  3.         }  
  4.         .top{  
  5.             width: 100%;  
  6.             height: 200px;  
  7.             position: absolute;  
  8.             top: 0;  
  9.         }  
  10.         .center{  
  11.             width: 100%;  
  12.             position: absolute;  
  13.             top: 200px;  
  14.             bottom: 200px;  
  15.         }  
  16.         .bottom{  
  17.             width: 100%;  
  18.             height: 200px;  
  19.             position: absolute;  
  20.             bottom: 0;  
  21.         }  

 

 

这里用到了绝对定位，把上面的和下面的分别设置top:0,bottom:0 固定在上下两端，中间的距离上下200px即可。

 

四、上下两部分，底下这个固定高度200px，如果上面的内容少，那么这个footer就固定在底部，如果内容多，就把footer挤着往下走

 

[html] 
  1.     <div class="divBox">  
  2.         <div class="content"></div>  
  3.         <div class="footer"></div>  
  4.     </div>  
[css] 
 
  1.         html{  
  2.             height: 100%;  
  3.         }  
  4.         body{  
  5.             min-height: 100%;  
  6.             position: relative;  
  7.         }  
  8.         .content{  
  9.             width: 100%;  
  10.             padding-bottom: 200px;  
  11.         }  
  12.         .footer{  
  13.             width: 100%;  
  14.             height: 200px;  
  15.             position: absolute;  
  16.             bottom: 0;  
  17.         }  


固定footer在底部和把foorter往下挤着走都比较容易实现，但是合到一起，就不好弄了吧，其实也不难，更改content的高度，就可以看到效果了

 

必要的设置就是html要有高度,body的最小高度要有，footer是依照body进行绝对定位的，

了解了这些就不难实现了。

 

这些只是实现经典布局的一些方法，还有其他的方法，这里就不一一列出了。

posted @ 2018-01-18 13:42  Booo  阅读(3135)  评论(0)  编辑  收藏  举报