http://www.cnblogs.com/clumiere/p/4506252.html
display:table-cell的幾種應用
在使用Bootstrap的過程中，發現很多地方都應用了display:table-cell，決定好好研究一下table-cell的用法。
display:table-cell簡述
display:table-cell是指讓元素以表格單元格的形式來表現。目前所有主流瀏覽器都支持display:table-cell。display:table-cell的瀏覽器兼容性。
使用了display:table-cell的元素設置margin值無效，但padding值是有效的，所以如果要在設置了table-cell的元素上應用margin，需要再包裹一層元素。另外如果設置了display:table-cell的元素的父元素不是display:table-row，父元素的父元素不是display:table，那麼瀏覽器會自動創建相應的匿名元素，使得DOM層次結構符合table/inline-table>table-row>table-cell三層嵌套關係，這就是”匿名創建表格元素規則”。
利用display:table-cell創建等高佈局
table表格中每一行單元格都等高，設置了display:table-cell的一組元素也有同樣的特點。
利用display:table-cell創建兩欄自適應佈局
Bootstrap中的輸入框組就使用了table-cell來實現兩欄自適應。
其中input-add-on的寬度設置爲1%，這是一個CSS Hack。我們可以看到input-group-addon的寬度爲34px，這個單元格的寬度爲整個表格寬度的1%，所以設置了display:table的元素的width爲34*100px，因爲table元素的最大寬度不能超過其父元素的寬度，同時瀏覽器會保證所有的設置table-cell的元素的寬度總和等於table元素的寬度，這樣就實現了輸入框元素的寬度自適應。
利用display:table-cell創建等寬佈局
具體代碼如下：
HTML：
1 2 3 4 5 6 7 8 9 | <div id="wrapper"> <ul class="lists"> <li class="item"><a href="#">One</a></li> <li class="item"><a href="#">Two</a></li> <li class="item"><a href="#">Three</a></li> <li class="item"><a href="#">Four</a></li> <li class="item"><a href="#">Five</a></li> </ul></div> |
CSS：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | #wrapper { width: 960px; margin: 100px auto;}.lists { display: table; width: 100%; border-collapse: collapse;}.lists .item { display: table-cell; width: 1%; text-align: center; border: 1px solid black;}.lists .item a { display: block; padding: 25px; color: white; background: gray;}.lists .item a:hover { color: yellow; background: #979797;} |