佈局神器display:table-cell

隨 着時間的推動，ie六、ie7在中國瀏覽器市場的佔有率愈來愈低的狀況，我如今工做的團隊，通過用戶訪問數據，得知ie六、ie7的用戶已經很是少的前提 下，決定不在兼容ie六、ie7。正式在這個激動人心的決定後，讓我對display:table-cell；這個屬性有了更加深刻的應用和理解。在 ie8還必須兼容的pc端，它絕對是一個現代的佈局神器。

        我並不喜歡用float來作佈局，由於它觸發的問題比較多，例如要清除浮動，元素浮動後還會致使該元素脫離文檔流，即便你清除float，該元素依舊是脫離文檔流。

        在 須要兼容ie六、ie7的時代我也儘可能避免使用float來佈局，左右佈局能用display:inline-block;佈局我就用它來佈局，可是仍是 沒法徹底不使用它，不少佈局例如須要靠左和靠右的佈局場景下就沒辦法不去使用float來佈局。我如今切頁面不多會去在ie下查看效果，大部分是經過 chrome來進行調試的，等整個頁面切好了，再用ie過一遍頁面，大部分時候頁面是沒什麼太多兼容問題，這或許多年來工做累積的經驗使我寫代碼時避開了 一些兼容坑，也多是本身對盒模型摸索許久以來的一些經驗。

    廢話很少說，下面直接看demo例子，好能夠快速愛上display:inline-block;

元素兩端對齊

    第一個案例是讓兩個元素分別向左和向右對齊，若是是過去，我必定會用float來實現，但其實用table能夠這麼作：

    

DEMO1

自動平均劃分每一個小模塊，使其一行顯示

第二個案例咱們先看看圖：

        遇 到上面這種佈局，通常會用float來作，或者把每一個li設置成display:inline-block;來作，而且都要設置給他們設置一個寬度，並且 最痛苦的是5個li若是你設置width:20%;他們必定會掉下來，若是li都設置成display:table-cell；就不會出現這種狀況，即便 不設置寬度他們也會在一行顯示，你在加多一行他也不會掉下來，依舊會在同樣顯示。DEMO2

    

圖片垂直居中於元素

        有時候咱們須要讓圖片垂直水平都居中於某個元素，用常規寫法比較複雜，但用table-cell則相對簡單：DEMO3

兩box實現等高對齊

        上圖中的左側的box的高度始終跟隨右側的box的高度變化而變化：DEMO4

        上 面的案例我故意不對右側的box設置display:table-cell，只對左側，因此就會出現左側跟隨右側高度變化而變化，若是要實現無論兩個 box哪一個高度產生變化另外一個就跟隨，只須要把右側的box也設置成display:table－cell就能夠實現了。

彈性、響應式佈局

        上 面的demo中你們只要改變瀏覽器寬度就會發現他們其實都是會隨高度變化自動變化高度的，其實上面內容我大部分沒有設置絕對單位，即便設置了也只設置其中 一個box另外一個就讓他去自適應父元素的剩餘留下來的寬度，其實佈局的時候設置寬度是一件很痛苦的事情，由於除了大量計算有時候可能在多瀏覽器下還算不 準，可能你在chrome設好的寬度在ie下就坑爹了，要寫hack才能解決。最後一個案例，據不靠譜的傳言faceboox曾經也這麼使用過：DEMO5

 

        移動端佈局由於有display:box這等屬性，因此table-cell相對就排不上什麼大用場，不過在移動端你要用table-cell也不是不能夠，根據本身對屬性的理解去使用就能夠了。

轉載請註明來自                                                            520UED                                                                                                                            http://www.520ued.com/article/table-cell