幾種display table cell的應用

display:table- cell屬性指讓標籤元素以**單元格的形式呈現，類似於td標籤。目前ie8+以及其他現代瀏覽器都是支援此屬性的，但是ie6/7只能對你說 sorry了，這一事實也是大大制約了display:table-cell屬性在實際專案中的應用。

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

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

使用display:table-cell讓大小不固定元素垂直居中已經是很老的方法了，關於此應用，我已經在「大小不固定的、多行文字的水平垂直居中

」這篇文章中有過介紹。

/*這裡的大小是根據高寬上限128畫素設定的*/

divdiv img

結果如下圖：

這裡有個demo位址，裡面有display:table-cell實現大小不固定垂直居中的效果展示，您可以狠狠地點選這裡

。就在前不久，看facebook好友動態列表頁面前端**的時候才發現原來display:table-cell可以用在兩欄的自適應布局上。

雖然ie6/7不認識display:table-cell，但是虧了其一向自以為是的渲染與解析，我們可以很幸運的使用其他屬性實現幾乎一致的效果。

您可以狠狠地點選這裡：display:table-cell下兩欄自適應布局demo

**展示：

本例中，左側為頭像，右側內容自適應。其中頭像部分使用了float屬性，左浮動，ie8+以及firefox、chrome、opera等現代瀏覽器右側使用了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自適應布局的頭像寬度都不需要亮了，可以說是更加懶惰，更加直接的好方法。

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

.list_cell

/*中間乙個元素背景淡藍，有別於兩邊的淡灰色*/

.list_center

結果在現代瀏覽器下（如下firefox3.6下截圖）：

您可以狠狠地點選這裡：table-cell等高布局demo

對於不支援display:table-cell屬性的ie6/7瀏覽器，又當如何解決呢？

我們可以使用「補差等高法」，就是乙個乙個很大的margin-bottom負值配上乙個同樣大小的padding-bottom值，本例中為了例項需

要，margin-bottom值就百來畫素。顯然，由於兩者原理不同，難免需要用到hack，所以demo完整css**如下：

.list_row

.list_cell

.list_center

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

你一定也有過這種感覺的。...羅蘭《寂寞的感覺》

作為乙個被基阿異捅過...水，四積陰功五讀書。

奔波了一...永遠幸福快樂！

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

這裡的列表布局專指橫向repeat的布局，就像下圖所示的：

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

首先是效果：

您可以狠狠地點選這裡：display:table-cell下的列表布局

可以看到即使模組高度不一致，也不會產生浮動布局可能產生的錯位。

由於table-cell需要每行包裹乙個獨立的標籤，所以，在後台repeat輸出的時候，需要兩次迴圈，而是列數是限死的（與浮動布局一樣）。對於簡單

的列表，使用display:table-cell是很難看到什麼優勢的，但是，如果列表複雜，資料多，內容細，display:table-cell可

能會像大s訂婚的傳聞那樣讓人震驚。

幾種display table cell的應用

mysql幾種索引 mysql的幾種索引

mysql幾種語言 mysql的幾種SQL語句

osgearth訪問幾種資料的幾種方式

幾種display table cell的應用

mysql幾種索引 mysql的幾種索引

mysql幾種語言 mysql的幾種SQL語句

osgearth訪問幾種資料的幾種方式

相關推薦