我所知道的幾種display:table-cell的應用

一、display:table-cell屬性簡述

display:table-cell屬性指讓標籤元素以表格單元格的形式呈現,類似於td標籤。目前IE8+以及其他現代瀏覽器都是支持此屬性的,但是IE6/7只能對你說sorry了,這一事實也是大大制約了display:table-cell屬性在實際項目中的應用(寫於2016年8月24日:時代在變,當下,是時候登上舞臺了)。

我們都知道,單元格有一些比較特別的屬性,例如元素的垂直居中對齊,關聯伸縮等,所以display:table-cell還是有不少潛在的使用價值的,雖說IE6/7不支持此屬性,但是幸運的是,IE6/7一些亂糟糟的屬性與渲染,我們可以其他方法實現同樣或是類似的效果。

與其他一些display屬性類似,table-cell同樣會被其他一些CSS屬性破壞,例如floatposition:absolute,所以,在使用display:table-cellfloat:left或是position:absolute屬性儘量不用同用。設置了display:table-cell的元素對寬度高度敏感,對margin值無反應,響應padding屬性,基本上就是活脫脫的一個td標籤元素了。

二、display:table-cell與大小不固定元素的垂直居中

使用display:table-cell讓大小不固定元素垂直居中已經是很老的方法了,關於此應用,我已經在“大小不固定的圖片、多行文字的水平垂直居中”這篇文章中有過介紹。
以前圖片垂直居中之截圖 張鑫旭-鑫空間-鑫生活

方便閱讀,這裏再次展示下代碼:

/*這裏的大小是根據高寬上限128像素圖片設置的*/div{display:table-cell; width:1em; height:1em; border:1px solid #beceeb; font-size:144px; text-align:center; vertical-align:middle;} 
div img{vertical-align:middle;}

結果如下圖:
table-cell和文字大小實現的圖片垂直居中顯示

這裏有個demo地址,裏面有display:table-cell實現大小不固定圖片垂直居中的效果展示,您可以狠狠地點擊這裏

二、display:table-cell與兩欄自適應佈局

就在前不久,看facebook好友動態列表頁面前端代碼的時候才發現原來display:table-cell可以用在兩欄的自適應佈局上。
facebook的table-cell自適應方法 張鑫旭-鑫空間-鑫生活

雖然IE6/7不認識display:table-cell,但是虧了其一向自以爲是的渲染與解析,我們可以很幸運的使用其他屬性實現幾乎一致的效果。
display:table-cell下的兩欄自適應效果截圖 張鑫旭-鑫空間-鑫生活

您可以狠狠地點擊這裏:display:table-cell下兩欄自適應佈局demo

代碼展示:
本例中,左側爲頭像,右側內容自適應。其中頭像部分使用了float屬性,左浮動,IE8+以及Firefox、Chrome、Opera等現代瀏覽器右側使用了display:table-cell屬性,結果就自適應了,很簡單的代碼,很神奇的效果。
display:table-cell自適應佈局代碼展示 張鑫旭-鑫空間-鑫生活

OK,對於不認識display:table-cell屬性的IE6/7呢?哦呵呵,很簡單,使用display:inline-block屬性代替display:table-cell就完全ok的啦!

原因在於:IE6/7下block屬性的元素對inline-block屬性是有反應,但是卻不是純潔的反應,而是怪蜀黍看到粉嫩小蘿莉的一點邪念,就是讓元素有個怪異的haslayout屬性。//zxx:大家似乎都喜歡用haslayout解析一些老IE下的一些怪異現象,但我自己打心底裏是不認同這個概念。

如果IE6/7是很標準的純潔的解釋inline-block屬性的話,是無法實現自適應的,右側的文字描述內容會跑到頭像的下面,哦呵呵~~有點負負得正,以毒攻毒的意味。代碼如下:

display:table-cell; *display:inline-block;

就萬事大吉,收工回家了。

在本例demo中,右側內容足夠多,所以寬度完整的撐開了,如果內容有限,則寬度就是內容的寬度,此時想要讓某個元素(例如關閉按鈕)右側定位就會有問題,解決方法就是定義一個非常寬的寬度,就像上面facebook截圖中的CSS屬性一樣,所以,考慮到各種情況,更健壯耐用的CSS代碼應如下:

display:table-cell; *display:inline-block; width:2000px; *width:auto;

或者使用:

display:table-cell;  width:2000px; *width:auto; *zoom:1;

這種兩欄的自適應佈局,不僅不要分別丈量與計算兩列的寬度,連“頁面重構鑫三無準則 之無寬度準則”中absolute自適應佈局的頭像寬度都不需要亮了,可以說是更加懶惰,更加直接的好方法。

三、display:table-cell下的等高佈局

table表格中的單元格最大的特點之一就是同一行列表元素都等高。所以,很多時候,我們需要等高佈局的時候,就可以藉助display:table-cell屬性。說到table-cell的佈局,不得不說一下“匿名錶格元素創建規則”:

CSS2.1表格模型中的元素,可能不會全部包含在除HTML之外的文檔語言中。這時,那些“丟失”的元素會被模擬出來,從而使得表格模型能夠正常工作。所有的表格元素將會自動在自身周圍生成所需的匿名table對象,使其符合table/inline-table、table-row、table- cell的三層嵌套關係。

舉個例子吧,如果我們爲元素使用“display:table-cell;”屬性,而不將其父容器設置爲“display:table-row;”屬性,瀏覽器會默認創建出一個表格行,就好像文檔中真的存在一個被聲明的表格行一樣。如果您還不是很理解,可見參見支付寶UED的“基於display:table的CSS佈局”一文。//zxx:支付寶今年的招牌廣告做得很讚的~~

實現等高佈局,毫無疑問,display:table-cell是首選,這就好比鼴鼠,生下來就是爲了打洞用的。考慮到匿名創建表格元素的問題,所有table-cell元素外一定要留有一個用來包裹的標籤。於是,我們有類似下面的CSS代碼:

.list_row{display:table-row;}
.list_cell{display:table-cell; width:30%; padding:1.6%; background-color:#f5f5f5;}/*中間一個元素背景淡藍,有別於兩邊的淡灰色*/.list_center{background-color:#f0f3f9;}

結果在現代瀏覽器下(如下Firefox3.6下截圖):
table-cell下的等高佈局 張鑫旭-鑫空間-鑫生活

您可以狠狠地點擊這裏:table-cell等高佈局demo

對於不支持display:table-cell屬性的IE6/7瀏覽器,又當如何解決呢?
我們可以使用“補差等高法”,就是一個一個很大的margin-bottom負值配上一個同樣大小的padding-bottom值,本例中爲了實例需要,margin-bottom值就百來像素。顯然,由於兩者原理不同,難免需要用到hack,所以demo完整CSS代碼如下:

.list_row{display:table-row; overflow:hidden;}
.list_cell{display:table-cell; width:30%; margin-bottom:-100px; padding:1.6%; *padding-bottom:110px; background-color:#f5f5f5; *float:left;}
.list_center{background-color:#f0f3f9;}

認識display:table-cell屬性的元素對margin屬性不敏感,所以上面margin-bottom屬性前沒有加*號。HTML結構代碼如下:

<div class="list_row">
    <div class="list_cell">你一定也有過這種感覺的。...羅蘭《寂寞的感覺》</div>
    <div class="list_cell list_center">作爲一個被基阿異捅過...水,四積陰功五讀書。</div>
    <div class="list_cell">奔波了一...永遠幸福快樂!</div>
</div>

//zxx:“補差等高法”雖然有效,也有兼容性,但是會帶來一些潛在的問題,不宜多用。

四、display:table-cell下的列表佈局

這裏的列表佈局專指橫向repeat的佈局,就像下圖所示的:
列表佈局示意  張鑫旭-鑫空間-鑫生活

一般這類佈局都是使用浮動的。但是浮動佈局的不足在於:一是需要清除浮動造成影響;二是不支持不定高列表的浮動。替代浮動佈局的方法是有的,如果深究細節以及一些思想,方法還不少。其中有一個方法就是使用display:table-cell

當然,說句心裏話,將display:table-cell屬性用在列表元素佈局上,有點類似於張飛繡衣服,大馬拉小車,優勢並沒有多大發揮,但是,畢竟也算浮動佈局的一個備用替換方案。我的下一篇文章將會詳細講解浮動佈局的替換方案,其中table-cell方法可以說是裏面最不好的一個方法,本着過渡和熱身的目的,這裏只簡單講過。

首先是效果:
您可以狠狠地點擊這裏:display:table-cell下的列表佈局

可以看到即使模塊高度不一致,也不會產生浮動佈局可能產生的錯位。
由於table-cell需要每行包裹一個獨立的標籤,所以,在後臺repeat輸出的時候,需要兩次循環,而是列數是限死的(與浮動佈局一樣)。對於簡單的列表,使用display:table-cell是很難看到什麼優勢的,但是,如果列表複雜,數據多,內容細,display:table-cell可能會像大S訂婚的傳聞那樣讓人震驚。

好,點到爲止,就說這些。我的下一篇文章還會講到此屬性的佈局的。

更新於2016年8月24日
display:table-cell下的列表佈局最適用的場景是:列表個數不固定,但是,無論列表幾個,都平分容器空間。什麼意思呢?就是如果4個列表,希望每個寬度25%,3個就33.3333%,2個列表希望每個寬度50%。此時,沒有比display:table-cell更合適的技術了。

父級設置display:table同時寬度爲容器寬度,或者直接width:100%,此時,display:table-cell子元素就會自動等分。

14.gif

五、結語

對於display:table-cell,我自己其實用的並不多,畢竟其特殊之處就在於垂直居中,等高,水平級聯,匿名創建等特性,其他種種屬性可以使用其他更好的display屬性代替的。但是話說回來,不太使用display:table-cell屬性的真正的原因可能是對該屬性的瞭解的還不夠深入,可能該屬性本身是存在很多非常實用的應用,但是自己由於掌握不夠而不知道。所以,要是哪位同行知道display:table-cell其他一些不錯的應用的話,歡迎大力補充,不甚感謝!

最後,時間倉促,資質有限,文中要是有表述不準確的地方還望見諒,歡迎嚴厲地指正。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章