分享用纯CSS实现三列DIV等高布局的方法

DIV等高布局,我想很多人都遇见过,我也看过不少的方法,有的是通过背景图片,实现假象的等高效果;还有的用js实现等等。这些都是方法,但是现在都不用以上的方法,来个真正的纯css实现等高!

成都创新互联专业为企业提供东明网站建设、东明做网站、东明网站设计、东明网站制作等企业网站建设、网页设计与制作、东明企业网站模板建站服务,10年东明做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

现在我们来看看真正的 CSS 实现的等高布局,其方法主要是采用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的。 下面来看看实际的例子(三列等高),以下面的 XHTML 代码为例:

html代码:

 
 
 
  1.  
  2.  
  3. left

     
  4. left

     
  5. left

     
  6. left

     
  7. left

     
 
  •  
  • center

     
  • center

     
  • center

     
  • center

     
  • center

     
  • center

     
  • center

     
  • center

     
  • center

     
  • center

     
  • center

     
  • center

     
  • center

     
  • center

     
  • center

     
  • center

     
  • center

     
  • center

     
  • center

     
  • center

     
  •  
  •  
  • right

     
  • right

     
  • right

     
  •  
  •  
  • css代码:

     
     
     
    1.  
    2. body, p, ul { margin:0; padding:0; }  
    3. #wrap { overflow:hidden; width:1000px; margin:0 auto; }  
    4. #left, #center, #right { margin-bottom:-10000px; padding-bottom:10000px; }  
    5. #left { float:left; width:250px; background:#00FFFF; }  
    6. #center { float:left; width:500px; background:#FF0000; }  
    7. #right { float:right; width:250px; background:#00FF00; }  
    8.  
    9.  
    10.  
    11.  
    12.  
    13. CSS等高布局  
    14.  
    15. *{  
    16. margin:0;  
    17. padding:0;  
    18. }  
    19. #wrap{  
    20. overflow:hidden;  
    21. width:1000px;  
    22. margin:0 auto;  
    23. }  
    24. #left,#center,#right{  
    25. margin-bottom:-10000px;  
    26. padding-bottom:10000px;  
    27. }  
    28. #left{  
    29. float:left;  
    30. width:250px;  
    31. background:#00FFFF;  
    32. }  
    33. #center{  
    34. float:left;  
    35. width:500px;  
    36. background:#FF0000;  
    37. }  
    38. #right{  
    39. float:right;  
    40. width:250px;  
    41. background:#00FF00;  
     
     
     
    1.  
    2.  
    3.  
    4.  
    5.  
    6. left

       
    7. left

       
    8. left

       
    9. left

       
    10. left

       
    11.  
    12.  
    13. center

       
    14. center

       
    15. center

       
    16. center

       
    17. center

       
    18. center

       
    19. center

       
    20. center

       
    21. center

       
    22. center

       
    23. center

       
    24. center

       
    25. center

       
    26. center

       
    27. center

       
    28. center

       
    29. center

       
    30. center

       
    31. center

       
    32. center

       
    33.  
    34.  
    35. right

       
    36. right

       
    37. right

       
    38.  
    39.  
    40.  
    41.  

    当前标题:分享用纯CSS实现三列DIV等高布局的方法
    分享网址:http://www.shufengxianlan.com/qtweb/news15/545965.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

    猜你还喜欢下面的内容

    网站改版知识

    各行业网站