display:table-cell自適應佈局

這幾天遇到了一個佈局問題，然後有時間就記錄一下，常見的幾種佈局外，float、position： absolute等等；還有一些功能強大且好用的佈局方式，display：table-cell，之前很少使用，無意中發現使用display:table-cell也是一個很好用的自適應佈局，所以本文來聊聊display：table-cell

問題發現：

• 上面是我現在實現的佈局樣式
• 下面是我要實現的佈局樣式

這個佈局很簡單就是左右佈局，但是沒想到實現出來的效果卻略微不同。上面我是用float浮動，但是文字部分就是包圍結構，無論怎麼設定也達不到我想要的效果，於是想到了這次的主角：display:table-cell，發現用完之後真的實現啦！

• 下面是我用這個屬性後的效果

接下來我們聊聊display以及這個屬性

CSS display 屬性

定義和用法

display 屬性規定元素應該生成的框的型別。

說明

這個屬性用於定義建立佈局時元素生成的顯示框型別。對於 HTML 等文件型別，如果使用 display 不謹慎會很危險，因為可能違反 HTML 中已經定義的顯示層次結構。對於 XML，由於 XML 沒有內建的這種層次結構，所有 display 是絕對必要的。
可能的值

值	描述
none	此元素不會被顯示。
block	此元素將顯示為塊級元素，此元素前後會帶有換行符。
inline	預設。此元素會被顯示為內聯元素，元素前後沒有換行符。
inline-block	行內塊元素。（CSS2.1 新增的值）
list-item	此元素會作為列表顯示。
run-in	此元素會根據上下文作為塊級元素或內聯元素顯示。
compact	CSS 中有值 compact，不過由於缺乏廣泛支援，已經從 CSS2.1 中刪除。
marker	CSS 中有值 marker，不過由於缺乏廣泛支援，已經從 CSS2.1 中刪除。
table	此元素會作為塊級表格來顯示類似 table，表格前後帶有換行符。
inline-table	此元素會作為內聯表格來顯示類似 table，表格前後沒有換行符。
table-row-group	此元素會作為一個或多個行的分組來顯示類似 tbody。
table-header-group	此元素會作為一個或多個行的分組來顯示類似 thead。
table-footer-group	此元素會作為一個或多個行的分組來顯示類似 tfoot。
table-row	此元素會作為一個表格行顯示類似 tr。
table-column-group	此元素會作為一個或多個列的分組來顯示類似 colgroup。
table-column	此元素會作為一個單元格列顯示類似 col
table-cell	此元素會作為一個表格單元格顯示類似 td 和 th
table-caption	此元素會作為一個表格標題顯示類似 caption
inherit	規定應該從父元素繼承 display 屬性的值。

設定了display：table-cell的元素：

1. 對寬度高度比較敏感
2. 對margin值無反應
3. 響應padding屬性
4. 內容溢位時會自動撐開父元素

上面實現的效果圖就是左邊頭像部分使用了float左浮動屬性，右側使用 display: table-cell則實現了兩列自適應佈局。

總結：

前端佈局很重要，佈局表達方式也有很多種，挑一個你喜歡的來做，只要你能實現，哪個都是可以的，但是我也很推薦一些屬性用起來熟練後，我們可以嘗試用其他的用用鍛鍊鍛鍊，因為它會給你一個很大的surprise哦！