自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

純CSS無hacks的跨流覽器多列布局

開發(fā) 前端
本文翻譯自Matthew James Taylor的Equal Height Columns with Cross-Browser CSS and No Hacks，有些部分根據(jù)筆者的理解改了，讓一些初心者更好理解跨流覽器多列布局。

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

問題的癥結所在 

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

問題的癥結所在

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

對內(nèi)容與背景實行分離

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

利用浮動嵌套解決***列的高度的問題。

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

對內(nèi)容與背景實行分離

 
 

單行三列的布局的結構層代碼。

  1. <div id="container1"> 
  2.     <div id="col1">Column 1</div> 
  3.     <div id="col2">Column 2</div> 
  4.     <div id="col3">Column 3</div> 
  5. </div> 
 

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

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

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

增加用來顯示背景的容器

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

增加用來顯示背景的容器

 
 

新的結構層代碼，讓新增的容器套在原來的外圍容器上！

  1. <div id="container3"> 
  2.     <div id="container2"> 
  3.         <div id="container1"> 
  4.             <div id="col1">Column 1</div> 
  5.             <div id="col2">Column 2</div> 
  6.             <div id="col3">Column 3</div> 
  7.         </div> 
  8.     </div> 
  9. </div> 

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

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

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

現(xiàn)在是所有容器都***地累在一起，只顯示一種背景顏色，我們必須讓其他背景也顯示出來。為此我們就得利用相對定位來讓這些容器像階梯一樣放置。這個本可以使用負邊界技術，但該死的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)層代碼

  1. #container3 {  
  2.     float:left;  
  3.     width:100%;  
  4.     background:green;  
  5. }  
  6. #container2 {  
  7.     float:left;  
  8.     width:100%;  
  9.     background:yellow;  
  10.     position:relative;  
  11.     right:30%;  
  12. }  
  13. #container1 {  
  14.     float:left;  
  15.     width:100%;  
  16.     background:red;  
  17.     position:relative;  
  18.     right:40%;  
  19. }  
  20. #col1 {  
  21.     float:left;  
  22.     width:30%;  
  23. }  
  24. #col2 {  
  25.     float:left;  
  26.     width:40%;  
  27. }  
  28. #col3 {  
  29.     float:left;  
  30.     width:30%;  
  31. } 
 
把各列的內(nèi)容移回原來的位置上

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

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

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

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

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

完整的CSS

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

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

【編輯推薦】

  1. CSS 3中的炫目新功能搶先預覽
  2. CSS 3備受期待的8大功能
  3. CSS網(wǎng)頁布局困擾新手的八個問題
  4. 25個下拉菜單導航腳本下載
  5. HTML 5 正式標準恐將2022年才能正式發(fā)布

責任編輯：彭凡 來源： cnblogs
跨流覽器多列布局
相關推薦

2010-09-06 15:46:08

CSSDIV

2011-06-03 15:32:25

CSS

2011-07-05 10:53:02

CSS

2020-10-13 08:40:01

CSS多行多列布局

2020-07-14 08:31:42

CSS網(wǎng)格布局項目

2010-09-14 14:18:09

CSS跨瀏覽器開發(fā)

2017-07-18 14:28:04

HTMLCSSJS

2023-04-17 09:08:27

CSS計時器

2010-09-02 13:53:58

CSS Sprites

2017-04-27 14:05:59

CSS動畫前端

2019-04-03 13:00:27

CSSBFC前端

2021-01-19 12:16:10

CSS前端UI

2019-09-18 18:30:20

云計算云服務提供商IT支出

2021-10-19 22:23:47

CSSBeautiful按鈕

2024-08-29 08:13:58

2017-08-20 12:49:59

瀏覽器跨域服務器

2022-04-10 10:42:44

CSS前端前端布局

2010-08-23 15:22:56

CSSfloat

2024-06-27 13:28:56

2021-01-25 06:37:06

Css前端CSS 特效
點贊
收藏

51CTO技術棧公眾號