幾種display table cell的應用

2022-09-03 11:15:09 字數 3755 閱讀 8365

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屬性用在列表元素布局上,有點類似於張飛繡衣服,大馬拉小車,優勢並沒有多大發揮,但

本著過渡和熱身的目的,這裡只簡單講過。

首先是效果:

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

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

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

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

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

mysql幾種索引 mysql的幾種索引

為什麼建立索引後,速度就會變快?答 使用索引後,查詢是按二叉樹演算法來查詢到記錄 索引使用的注意事項 索引的代價 1.占用磁碟空間 2.對dml 新增 修改 刪除 操作有影響,變慢 在哪些列上適合新增索引 1.較頻繁的作為查詢條件字段應該建立索引 select from emp where empn...

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

一 資料查詢語言 dql dql全稱 data query language,作用是從表中獲取資料,用的最多的關鍵字是select,保留字有where order by group by等 1 select user,host from mysql.user select user,host fro...

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

原文章 osgearth訪問資料分類方式可以分為使用earth檔案載入和通過程式載入。1.earth檔案方式比較簡單方便 只要掌握一定的格式就能訪問各種資料,下面就給出乙個例子 訪問網上的arcgis server 資料的例子 tile 100 0 0.jpegata image false 9非常...