日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
實現(xiàn)CSS中div列高度自適的3種途徑

這里向大家描述一下解決div列高度自適的3種常用方法，其中最常用大就是利用“clear:both”背景填充，三行二列布局，主要內(nèi)容在右邊，網(wǎng)頁寬度780px,左列240px,右列540px，相信本文介紹一定會讓你有所收獲。

CSS技巧：解決div列高度自適的3種常用方法

解決div列高度自適的方法有很多種，這里介紹三種最常用的方法給大家（下面所有例子以父main，子divleft、divright為例）。

1、利用“clear:both”背景填充

這是使用最廣泛的一種做法，我一直都用此方法解決div列高度自適問題。三行二列布局，主要內(nèi)容在右邊，網(wǎng)頁寬度780px,左列240px,右列540px。

CSS代碼：

 
 
 
    
  
  
  
  1. #main{ 
    2. 
  
  
  
  2. width:780px; 
    3. 
  
  
  
  3. margin:0; 
    4. 
  
  
  
  4. background:url(bg.gif)#FFFFFFrepeat-yleft; 
    5. 
  
  
  
  5. text-align:left; 
    6. 
  
  
  
  6. } 
    7. 
  
  
  
  7. 
  
  
  
  8. #divleft{ 
    9. 
  
  
  
  9. float:left; 
    10. 
  
  
  
  10. width:240px; 
    11. 
  
  
  
  11. } 
    12. 
  
  
  
  12. 
  
  
  
  13. #divright{ 
    14. 
  
  
  
  14. float:right; 
    15. 
  
  
  
  15. width:540px; 
    16. 
  
  
  
  16. } 
    17. 
  
  
  
  17. 
  
  
  
  18. .clear{ 
    19. 
  
  
  
  19. border-top:1pxsolidtransparent!important; 
    20. 
  
  
  
  20. margin-top:-1px!important; 
    21. 
  
  
  
  21. border-top:0; 
    22. 
  
  
  
  22. margin-top:0; 
    23. 
  
  
  
  23. clear:both; 
    24. 
  
  
  
  24. visibility:hidden; 
    25. 
  
  
  
  25. } 
    26. 
  
  
  
  26.

 html代碼：

 
 
 
    
  
  
  
    2.

  • 優(yōu)點：無hacks，完全的自適應高度。

    2、腳本控制DIV列高度

    在中加入如下代碼（假設divright的高度相對***）：

     
 
 
      
  
  
  
    1. 
  
  
  
    2.

    優(yōu)點：代碼超級簡單

    缺點：要確定有某一列的高度始終是相對***的，此方法比較被動。#p#

    3、margin負值父子容器高度繼承

    這個方法能較好地解決DIV列高度相同的問題。三行二列布局，主要內(nèi)容在左邊，網(wǎng)頁寬度780px,左列540px,右列240px。

    CSS代碼：

     
 
 
      
  
  
  
    1. #main{ 
      2. 
  
  
  
    2. 　　width:540px; 
      3. 
  
  
  
    3. 　　float:left; 
      4. 
  
  
  
    4. 　　background:#FFFFFF; 
      5. 
  
  
  
    5. 　　text-align:left; 
      6. 
  
  
  
    6. } 
      7. 
  
  
  
    7. 
  
  
  
    8. #divleft{ 
      9. 
  
  
  
    9. 　　width:540px; 
      10. 
  
  
  
    10. 　　float:left; 
      11. 
  
  
  
    11. 　　position:relative; 
      12. 
  
  
  
    12. 　　margin-left:-540px; 
      13. 
  
  
  
    13. } 
      14. 
  
  
  
    14. 
  
  
  
    15. #divright{ 
      16. 
  
  
  
    16. 　　width:240px; 
      17. 
  
  
  
    17. 　　float:right; 
      18. 
  
  
  
    18. 　　position:relative; 
      19. 
  
  
  
    19. 　　margin:0-240px00; 
      20. 
  
  
  
    20. 　　background:#F0F0F0; 
      21. 
  
  
  
    21. } 
      22. 
  
  
  
    22.

     html代碼：

     
 
 
      
  
  
  
      2. 
  
  
  
    2. 　　
      3. 
  
  
  
    3. 　　　　
  • 　　

  • 或許剛接觸的WebStandards的朋友對這種方法不怎么理解，現(xiàn)Blank分析一下：

    ［Ａ］
    ［Ｂ］［Ｃ］

    上結(jié)構(gòu)中a包含c，c包含b。當b的高度為***時，那么a和c將繼承b的高度，如果a和b位置重合，將顯示b的背景；而當c的高度***時，那么a繼承將繼承c的高度，如果a和b位置重合，將顯示a的背景。這樣無論b***或者c***都將顯示div列高度相同。

    優(yōu)點：兼有***種方法的優(yōu)點，并且比***種方法的代碼稍微簡潔。

    缺點：整體結(jié)構(gòu)只能左對齊。


    網(wǎng)站名稱：實現(xiàn)CSS中div列高度自適的3種途徑
    URL分享：http://www.dlmjj.cn/article/dhggcoj.html