最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

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

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

           
        
        
        

            
         
         
         
#container3 {  
            
         
         
         
    float:left;  
            
         
         
         
    width:100%;  
            
         
         
         
    background:green;  
            
         
         
         
}  
            
         
         
         
#container2 {  
            
         
         
         
    float:left;  
            
         
         
         
    width:100%;  
            
         
         
         
    background:yellow;  
            
         
         
         
}  
            
         
         
         
#container1 {  
            
         
         
         
    float:left;  
            
         
         
         
    width:100%;  
            
         
         
         
    background:red;  
            
         
         
         
}  
            
         
         
         
#col1 {  
            
         
         
         
    float:left;  
            
         
         
         
    width:30%;  
            
         
         
         
}  
            
         
         
         
#col2 {  
            
         
         
         
    float:left;  
            
         
         
         
    width:40%;  
            
         
         
         
}  
            
         
         
         
#col3 {  
            
         
         
         
    float:left;  
            
         
         
         
    width:30%;  
            
         
         
         
} 
           
        
        
        

用相對定位來移動容器

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

對應的表現(xiàn)層代碼

           
        
        
        

            
         
         
         
#container3 {  
            
         
         
         
    float:left;  
            
         
         
         
    width:100%;  
            
         
         
         
    background:green;  
            
         
         
         
}  
            
         
         
         
#container2 {  
            
         
         
         
    float:left;  
            
         
         
         
    width:100%;  
            
         
         
         
    background:yellow;  
            
         
         
         
    position:relative;  
            
         
         
         
    right:30%;  
            
         
         
         
}  
            
         
         
         
#container1 {  
            
         
         
         
    float:left;  
            
         
         
         
    width:100%;  
            
         
         
         
    background:red;  
            
         
         
         
    position:relative;  
            
         
         
         
    right:40%;  
            
         
         
         
}  
            
         
         
         
#col1 {  
            
         
         
         
    float:left;  
            
         
         
         
    width:30%;  
            
         
         
         
}  
            
         
         
         
#col2 {  
            
         
         
         
    float:left;  
            
         
         
         
    width:40%;  
            
         
         
         
}  
            
         
         
         
#col3 {  
            
         
         
         
    float:left;  
            
         
         
         
    width:30%;  
            
         
         
         
} 
           
        
        
        

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

由于最上層的那三列都是被整體往右往到(頁面的)70%，我們再把它們都往左移回70%就是！***，由于我們前兩個背景容器都是被向右移動，移出了游覽器，它們都與游覽器的右邊連在一起，我們可以設(shè)置***層的背景容器的overflow來隱藏那些被移出的部分。

           
        
        
        

            
         
         
         
#container3 {  
            
         
         
         
    float:left;  
            
         
         
         
    width:100%;  
            
         
         
         
    background:green;  
            
         
         
         
    overflow:hidden;  
            
         
         
         
    position:relative;  
            
         
         
         
}  
            
         
         
         
#container2 {  
            
         
         
         
    float:left;  
            
         
         
         
    width:100%;  
            
         
         
         
    background:yellow;  
            
         
         
         
    position:relative;  
            
         
         
         
    right:30%;  
            
         
         
         
}  
            
         
         
         
#container1 {  
            
         
         
         
    float:left;  
            
         
         
         
    width:100%;  
            
         
         
         
    background:red;  
            
         
         
         
    position:relative;  
            
         
         
         
    right:40%;  
            
         
         
         
}  
            
         
         
         
#col1 {  
            
         
         
         
    float:left;  
            
         
         
         
    width:30%;  
            
         
         
         
    position:relative;  
            
         
         
         
    left:70%;  
            
         
         
         
}  
            
         
         
         
#col2 {  
            
         
         
         
    float:left;  
            
         
         
         
    width:40%;  
            
         
         
         
    position:relative;  
            
         
         
         
    left:70%;  
            
         
         
         
}  
            
         
         
         
#col3 {  
            
         
         
         
    float:left;  
            
         
         
         
    width:30%;  
            
         
         
         
    position:relative;  
            
         
         
         
    left:70%;  
            
         
         
         
} 
           
        
        
        

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

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

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

完整的CSS

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

         
       
       
       

          
        
        
        
#container3 {  
          
        
        
        
    float:left;  
          
        
        
        
    width:100%;  
          
        
        
        
    background:green;  
          
        
        
        
    overflow:hidden;  
          
        
        
        
    position:relative;  
          
        
        
        
}  
          
        
        
        
#container2 {  
          
        
        
        
    float:left;  
          
        
        
        
    width:100%;  
          
        
        
        
    background:yellow;  
          
        
        
        
    position:relative;  
          
        
        
        
    right:30%;  
          
        
        
        
}  
          
        
        
        
#container1 {  
          
        
        
        
    float:left;  
          
        
        
        
    width:100%;  
          
        
        
        
    background:red;  
          
        
        
        
    position:relative;  
          
        
        
        
    right:40%;  
          
        
        
        
}  
          
        
        
        
#col1 {  
          
        
        
        
    float:left;  
          
        
        
        
    width:26%;  
          
        
        
        
    position:relative;  
          
        
        
        
    left:72%;  
          
        
        
        
    overflow:hidden;  
          
        
        
        
}  
          
        
        
        
#col2 {  
          
        
        
        
    float:left;  
          
        
        
        
    width:36%;  
          
        
        
        
    position:relative;  
          
        
        
        
    left:76%;  
          
        
        
        
    overflow:hidden;  
          
        
        
        
}  
          
        
        
        
#col3 {  
          
        
        
        
    float:left;  
          
        
        
        
    width:26%;  
          
        
        
        
    position:relative;  
          
        
        
        
    left:80%;  
          
        
        
        
    overflow:hidden;  
          
        
        
        
}