distable:table-cell
生活随笔
收集整理的這篇文章主要介紹了
distable:table-cell
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
我們在使用表格的時候，會看到表格中的單元格一般具有怎么樣的特點呢？文字的垂直居中對齊，關聯(lián)伸縮等等，這些都是表格單元格具有的特點。而display:table-cell可以讓元素具有這些特點！
這個屬性可以使得我們在布局時候實現(xiàn)下面三個功能：
（1）圖片垂直居中于元素（在其他隨筆中有記錄，略）
（2）等高布局
同一行的單元格td元素高度是相等的，因此，table-cell也是具備這個特點。
eg:
<!doctype html> <html> <head> <title></title> <style type="text/css"> #wrapper{display:table-row;} #img-box{ display:table-cell; width:150px; vertical-align:middle; /*垂直居中*/ text-align:center; /*水平居中*/ border:1px solid red; } #text-box{ display:table-cell; width:200px; border:1px solid red; border-left:none; padding:10px; } </style> </head> <body> <div id="wrapper"> <div id="img-box"><img src="images/haizeil.png" alt=""/></div> <div id="text-box"><p>這是一段文字</p></div> </div> </body> </html>在這個例子中，我們在左右兩個盒子中都沒有加上高度，但是兩個盒子的高度都剛好相等，這就是自適應等高布局。高度由兩者間最大的高度而決定
?
（3）自動平均劃分元素，并且在一行顯示
要讓無序列表橫向布局，我們通常會改變它的display屬性為inline-block元素或是將其定義為浮動元素。但是我們可以利用display：table-cell來解決，并且還能自動平均劃分元素。
語法：
#father{display:table;} #son{display:table-cell;}只要給父元素定義寬度，就會自動劃分子元素們
?
補充：去除inline-block元素間距
inline-block元素之間是有間距，這會影響我們的布局，可以使用font-size：0；來去除這個情況
語法：
#father{font-size:0;}
?
轉載于:https://www.cnblogs.com/runhua/p/6429290.html
總結
以上是生活随笔為你收集整理的distable:table-cell的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： u盘安装系统 显示出错怎么办 U盘安装系
- 下一篇： 异步 ThreadPool