日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
純CSS無hacks的跨流覽器多列布局

利用純CSS創(chuàng)建一個(gè)等高多列的布局并不件易事，本教程將著重分析出現(xiàn)在多列布局的多個(gè)問題，然后為大家等來一個(gè)簡單全游覽器通吃的解決方法，不使用圖片，腳本，CSS hacks并在最嚴(yán)格的XHTML 規(guī)范中都能通過驗(yàn)證。

問題的癥結(jié)所在 

 
 
 
 
    
  
  
  
  
  1. < STYLE type=text/css> .title {color:#ff7200;font-size:23px;line-height:28px} < /STYLE>  
    2.

如上圖所示，由于各列的內(nèi)容不一致導(dǎo)致其背景的高度也不統(tǒng)一。而背景實(shí)質(zhì)上是內(nèi)容（標(biāo)準(zhǔn)的盒子模型是由內(nèi)容區(qū) ，補(bǔ)白區(qū) ，邊框區(qū) 與邊界區(qū) 組成，背景存在于前三者中；IE為前兩者）的自適應(yīng)的問題。再轉(zhuǎn)化一下，如何撐大那些較短的列的高度，讓所有列的高度等于***的列的高度？這個(gè)，的確很很棘手，因?yàn)槲覀儾磺宄髁械母叨?，也無從得知哪一列***。我們也不能簡單地給所有列一個(gè)明確的高度，這可能會(huì)導(dǎo)致所有列都多出一大片空白，或者很不虧由于高度不足導(dǎo)致某些列的內(nèi)容無法全部顯示出來！現(xiàn)實(shí)中，內(nèi)容的長度是動(dòng)態(tài)的，因此每列的高度也是動(dòng)態(tài)的。我們必須意識(shí)到在網(wǎng)絡(luò)中，不存在”固定“二字，每個(gè)人的顯示器的分辯率都不盡一樣，游覽器的字體大小設(shè)置也不盡相同，這些都會(huì)影響到內(nèi)容的顯示高度。

對(duì)內(nèi)容與背景實(shí)行分離

解決等高問題的***步就是把它拆分為兩個(gè)較小的，可以單獨(dú)解決的部分。這樣，我們?cè)瓉硎且涣袑?duì)應(yīng)一個(gè)DIV，現(xiàn)在是一列對(duì)應(yīng)一個(gè)DIV，一個(gè)用來裝載內(nèi)容，一個(gè)用來顯示背景。這種分離有利于我們對(duì)各個(gè)元素的掌控和把它們用另一種更有效的方式組合起來，這引起我很快會(huì)在下面的章節(jié)講述。

利用浮動(dòng)嵌套解決***列的高度的問題。

這是解決多列等高的關(guān)鍵。使一個(gè)DIV的高度等于***列的高度的唯一方法就是讓這個(gè)DIV包含所有的列。換句話說，通過把所有的列放在一個(gè)容器中，容器的高度就是***列的高度。這是個(gè)非常有用的結(jié)構(gòu)。

   

單行三列的布局的結(jié)構(gòu)層代碼。

           
        
        
        
    
            
         
         
         
  1.  id="container1"> 
    2.             
         
         
         
  2.      id="col1">Column 1
 
  •      id="col2">Column 2
    •  
  •      id="col3">Column 3
    •  
    •  


     

    對(duì)應(yīng)的表現(xiàn)層代碼。


            
     
     
     
      
         
      
      
      
    1. #container1 {  
      2.          
      
      
      
    2.     float:left;  
      3.          
      
      
      
    3.     width:100%;  
      4.          
      
      
      
    4. }  
      5.          
      
      
      
    5. #col1 {  
      6.          
      
      
      
    6.     float:left;  
      7.          
      
      
      
    7.     width:30%;  
      8.          
      
      
      
    8.     background:red;  
      9.          
      
      
      
    9. }  
      10.          
      
      
      
    10. #col2 {  
      11.          
      
      
      
    11.     float:left;  
      12.          
      
      
      
    12.     width:40%;  
      13.          
      
      
      
    13.     background:yellow;  
      14.          
      
      
      
    14. }  
      15.          
      
      
      
    15. #col3 {  
      16.          
      
      
      
    16.     float:left;  
      17.          
      
      
      
    17.     width:30%;  
      18.          
      
      
      
    18.     background:green;  
      19.          
      
      
      
    19. } 
      20.

    為了使用這種結(jié)構(gòu)在所有游覽器都正常工作，我們必須讓外層容器往左或右浮動(dòng)，并且其子元素包含每一欄內(nèi)容的DIV也跟著浮動(dòng)，哪一個(gè)方向都無所謂。浮動(dòng)會(huì)使用它們往上對(duì)齊于外圍容器的上補(bǔ)白，并且浮動(dòng)的容器會(huì)自動(dòng)調(diào)整自身的高度與寬度以實(shí)現(xiàn)對(duì)浮動(dòng)子元素的包含。但是如果容器被定義了高度與寬度，則它不會(huì)隨子元素的大小而自動(dòng)調(diào)整自身顯示區(qū)域來適應(yīng)子元素的顯示。但在IE6與低版本的IE中，子浮動(dòng)元素能撐開外圍元素；幸好IE7與IE8已引正了這個(gè)不符合標(biāo)準(zhǔn)的做法。

    增加用來顯示背景的容器

    下一步是增加額外的容器，讓它們彼此嵌套，并讓所有外圍的容器數(shù)（新增的加上原來的那一個(gè)）等于列的總數(shù)：3。這三個(gè)容器用來顯示各列的背景。請(qǐng)注意，我們?nèi)サ袅嗽瓉砀髁械谋尘?，把它們移至這些容器上。

       

    新的結(jié)構(gòu)層代碼，讓新增的容器套在原來的外圍容器上！

            
     
     
     
      
         
      
      
      
    1.  id="container3"> 
      2.          
      
      
      
    2.      id="container2"> 
      3.          
      
      
      
    3.          id="container1"> 
      4.          
      
      
      
    4.              id="col1">Column 1
     
  •              id="col2">Column 2
    •  
  •              id="col3">Column 3
    •  
  •         
    •  
  •     
    •  
    •  

    新的表現(xiàn)層代碼，新增的容器都是浮動(dòng)元素！

    所有元素左浮動(dòng)，將容器寬度設(shè)為100%，使他們占滿頁面的寬度。背景色從內(nèi)容 div 移除并加至容器上。注，原文是所有容器的寬都設(shè)為100%，其實(shí)根本沒有這樣的必須，因?yàn)樵诟?dòng)嵌套中，外面的容器必須會(huì)被撐大能容得下內(nèi)部子元素的大?。?/p>

               
        
        
        
      
            
         
         
         
    1. #container3 {  
      2.             
         
         
         
    2.     float:left;  
      3.             
         
         
         
    3.     width:100%;  
      4.             
         
         
         
    4.     background:green;  
      5.             
         
         
         
    5. }  
      6.             
         
         
         
    6. #container2 {  
      7.             
         
         
         
    7.     float:left;  
      8.             
         
         
         
    8.     width:100%;  
      9.             
         
         
         
    9.     background:yellow;  
      10.             
         
         
         
    10. }  
      11.             
         
         
         
    11. #container1 {  
      12.             
         
         
         
    12.     float:left;  
      13.             
         
         
         
    13.     width:100%;  
      14.             
         
         
         
    14.     background:red;  
      15.             
         
         
         
    15. }  
      16.             
         
         
         
    16. #col1 {  
      17.             
         
         
         
    17.     float:left;  
      18.             
         
         
         
    18.     width:30%;  
      19.             
         
         
         
    19. }  
      20.             
         
         
         
    20. #col2 {  
      21.             
         
         
         
    21.     float:left;  
      22.             
         
         
         
    22.     width:40%;  
      23.             
         
         
         
    23. }  
      24.             
         
         
         
    24. #col3 {  
      25.             
         
         
         
    25.     float:left;  
      26.             
         
         
         
    26.     width:30%;  
      27.             
         
         
         
    27. } 
      28.

    用相對(duì)定位來移動(dòng)容器

    現(xiàn)在是所有容器都***地累在一起，只顯示一種背景顏色，我們必須讓其他背景也顯示出來。為此我們就得利用相對(duì)定位來讓這些容器像階梯一樣放置。這個(gè)本可以使用負(fù)邊界技術(shù)，但該死的IE5.5的盒子模型與W3C的不一致，為了兼容我們就得使用到CSS hack。由于本文聲明是不使用CSS hack，因此放棄。首先讓#container2向右移到30%,由于#container2裝著#container1，而#container1上裝著那三個(gè)列，這樣一來，最右邊的列就被移出游覽器的右邊了。而最外圍***層的容器#container3則露出來了，露了左邊的30%。然后我們?cè)僖苿?dòng)最上層的容器#container1，向右邊移動(dòng)40%，于是原來蓋住的第二層容器也露出來了，露出其左邊的40%,而#container1則只剩下100%-30%-40%=30%;上方的列也只剩下最右邊的列，卻表現(xiàn)為位于最左邊。這樣，背景也顯示正常了！

    對(duì)應(yīng)的表現(xiàn)層代碼

               
        
        
        
      
            
         
         
         
    1. #container3 {  
      2.             
         
         
         
    2.     float:left;  
      3.             
         
         
         
    3.     width:100%;  
      4.             
         
         
         
    4.     background:green;  
      5.             
         
         
         
    5. }  
      6.             
         
         
         
    6. #container2 {  
      7.             
         
         
         
    7.     float:left;  
      8.             
         
         
         
    8.     width:100%;  
      9.             
         
         
         
    9.     background:yellow;  
      10.             
         
         
         
    10.     position:relative;  
      11.             
         
         
         
    11.     right:30%;  
      12.             
         
         
         
    12. }  
      13.             
         
         
         
    13. #container1 {  
      14.             
         
         
         
    14.     float:left;  
      15.             
         
         
         
    15.     width:100%;  
      16.             
         
         
         
    16.     background:red;  
      17.             
         
         
         
    17.     position:relative;  
      18.             
         
         
         
    18.     right:40%;  
      19.             
         
         
         
    19. }  
      20.             
         
         
         
    20. #col1 {  
      21.             
         
         
         
    21.     float:left;  
      22.             
         
         
         
    22.     width:30%;  
      23.             
         
         
         
    23. }  
      24.             
         
         
         
    24. #col2 {  
      25.             
         
         
         
    25.     float:left;  
      26.             
         
         
         
    26.     width:40%;  
      27.             
         
         
         
    27. }  
      28.             
         
         
         
    28. #col3 {  
      29.             
         
         
         
    29.     float:left;  
      30.             
         
         
         
    30.     width:30%;  
      31.             
         
         
         
    31. } 
      32.

      把各列的內(nèi)容移回原來的位置上

    由于最上層的那三列都是被整體往右往到(頁面的)70%，我們?cè)侔阉鼈兌纪笠苹?0%就是！***，由于我們前兩個(gè)背景容器都是被向右移動(dòng)，移出了游覽器，它們都與游覽器的右邊連在一起，我們可以設(shè)置***層的背景容器的overflow來隱藏那些被移出的部分。

               
        
        
        
      
            
         
         
         
    1. #container3 {  
      2.             
         
         
         
    2.     float:left;  
      3.             
         
         
         
    3.     width:100%;  
      4.             
         
         
         
    4.     background:green;  
      5.             
         
         
         
    5.     overflow:hidden;  
      6.             
         
         
         
    6.     position:relative;  
      7.             
         
         
         
    7. }  
      8.             
         
         
         
    8. #container2 {  
      9.             
         
         
         
    9.     float:left;  
      10.             
         
         
         
    10.     width:100%;  
      11.             
         
         
         
    11.     background:yellow;  
      12.             
         
         
         
    12.     position:relative;  
      13.             
         
         
         
    13.     right:30%;  
      14.             
         
         
         
    14. }  
      15.             
         
         
         
    15. #container1 {  
      16.             
         
         
         
    16.     float:left;  
      17.             
         
         
         
    17.     width:100%;  
      18.             
         
         
         
    18.     background:red;  
      19.             
         
         
         
    19.     position:relative;  
      20.             
         
         
         
    20.     right:40%;  
      21.             
         
         
         
    21. }  
      22.             
         
         
         
    22. #col1 {  
      23.             
         
         
         
    23.     float:left;  
      24.             
         
         
         
    24.     width:30%;  
      25.             
         
         
         
    25.     position:relative;  
      26.             
         
         
         
    26.     left:70%;  
      27.             
         
         
         
    27. }  
      28.             
         
         
         
    28. #col2 {  
      29.             
         
         
         
    29.     float:left;  
      30.             
         
         
         
    30.     width:40%;  
      31.             
         
         
         
    31.     position:relative;  
      32.             
         
         
         
    32.     left:70%;  
      33.             
         
         
         
    33. }  
      34.             
         
         
         
    34. #col3 {  
      35.             
         
         
         
    35.     float:left;  
      36.             
         
         
         
    36.     width:30%;  
      37.             
         
         
         
    37.     position:relative;  
      38.             
         
         
         
    38.     left:70%;  
      39.             
         
         
         
    39. } 
      40.

      對(duì)列添加補(bǔ)白（內(nèi)邊距）

    ***，我們對(duì)列增加補(bǔ)白，讓每列顯得大方一些，而不是密密麻麻地塞滿一列。但是如果我們?cè)黾友a(bǔ)白，可能有一些游覽器的有病又犯了，在IE6和更低版本的IE中，其怪異的盒子模型，會(huì)產(chǎn)生一些我們不愿看到的結(jié)果。如，一個(gè) 200px 寬 20px 補(bǔ)白的 box 在 IE 中被視為 200px 寬，在其他瀏覽器中則為正確的 240px。補(bǔ)白應(yīng)該加在元素的寬度上。

    不過放心，我們可以用完全不依賴于 padding 的方法來解決這個(gè)問題。相反，我們把列弄窄一點(diǎn)（列寬減去兩側(cè)的補(bǔ)白），之后用相對(duì)定位把它們移至正確的位置。例如，我們用了 2% 的補(bǔ)白，則 30% 的列將減至 26%，40% 的列減至 36%。用相對(duì)定位移回列時(shí)需謹(jǐn)記，現(xiàn)在列變窄了，所以當(dāng)它們一起像最初那樣左浮動(dòng)時(shí)，每一個(gè)需要比上一個(gè)移動(dòng)更遠(yuǎn)的距離。

    完整的CSS

    為了使布局保持在小寬度我在每個(gè)內(nèi)容列增加了overflow:hidden; 這將切去超出列寬的東東，并阻止其干擾其他布局。重申一下，這只是 IE 的問題，其他所有瀏覽器會(huì)保持正確的布局，不管列內(nèi)是蝦米。如果你真想這樣做，可以用 IE 條件注釋只對(duì) IE 寫規(guī)則。

             
       
       
       
      
          
        
        
        
    1. #container3 {  
      2.           
        
        
        
    2.     float:left;  
      3.           
        
        
        
    3.     width:100%;  
      4.           
        
        
        
    4.     background:green;  
      5.           
        
        
        
    5.     overflow:hidden;  
      6.           
        
        
        
    6.     position:relative;  
      7.           
        
        
        
    7. }  
      8.           
        
        
        
    8. #container2 {  
      9.           
        
        
        
    9.     float:left;  
      10.           
        
        
        
    10.     width:100%;  
      11.           
        
        
        
    11.     background:yellow;  
      12.           
        
        
        
    12.     position:relative;  
      13.           
        
        
        
    13.     right:30%;  
      14.           
        
        
        
    14. }  
      15.           
        
        
        
    15. #container1 {  
      16.           
        
        
        
    16.     float:left;  
      17.           
        
        
        
    17.     width:100%;  
      18.           
        
        
        
    18.     background:red;  
      19.           
        
        
        
    19.     position:relative;  
      20.           
        
        
        
    20.     right:40%;  
      21.           
        
        
        
    21. }  
      22.           
        
        
        
    22. #col1 {  
      23.           
        
        
        
    23.     float:left;  
      24.           
        
        
        
    24.     width:26%;  
      25.           
        
        
        
    25.     position:relative;  
      26.           
        
        
        
    26.     left:72%;  
      27.           
        
        
        
    27.     overflow:hidden;  
      28.           
        
        
        
    28. }  
      29.           
        
        
        
    29. #col2 {  
      30.           
        
        
        
    30.     float:left;  
      31.           
        
        
        
    31.     width:36%;  
      32.           
        
        
        
    32.     position:relative;  
      33.           
        
        
        
    33.     left:76%;  
      34.           
        
        
        
    34.     overflow:hidden;  
      35.           
        
        
        
    35. }  
      36.           
        
        
        
    36. #col3 {  
      37.           
        
        
        
    37.     float:left;  
      38.           
        
        
        
    38.     width:26%;  
      39.           
        
        
        
    39.     position:relative;  
      40.           
        
        
        
    40.     left:80%;  
      41.           
        
        
        
    41.     overflow:hidden;  
      42.           
        
        
        
    42. } 
      43.


    當(dāng)前名稱：純CSS無hacks的跨流覽器多列布局
    轉(zhuǎn)載來于：http://m.5511xx.com/article/cdjehsp.html