頁面佈局是HTML+CSS的一個重點,除了常見的幾種佈局外,如:float、position: absolute等等;還有一些功能強大且好用的佈局方式,本文就display:table-cell做學習總結。
display:table-cell指讓標籤元素以表格單元格的形式呈現,使元素類似於td標籤。IE8+及現代版本的瀏覽器都支持此屬性,IE6/7不支持(可用其他方法實現類似效果)。同樣,display:table-cell屬性也會被float,position:absolute等屬性破壞效果,應避免同時使用。
設置了display:table-cell的元素:
- 對寬度高度敏感
- 對margin值無反應
- 響應padding屬性
- 內容溢出時會自動撐開父元素
display:table-cell的幾種用法
1.大小不固定元素的垂直居中
HTML代碼:
<div class="content">
<div style="padding: 50px 40px;background: #cccccc;color: #fff;"></div>
<div style="padding: 60px 40px;background: #639146;color: #fff;"></div>
<div style="padding: 70px 40px;background: #2B82EE;color: #fff;"></div>
<div style="padding: 80px 40px;background: #F57900;color: #fff;"></div>
<div style="padding: 90px 40px;background: #BC1D49;color: #fff;"></div>
</div>
CSS代碼:
.content {
display: table-cell;
padding: 10px;
border: 2px solid #999;
}
.content div {
display: inline-block;
vertical-align: middle;
}
display:table-cell 加上 vertical-align:middle 使高度不同的元素都垂直居中,其中div的display:inline-block使幾個div在同一行顯示。
補充一種多行文本垂直居中的方法:
HTML代碼:
<div class="wrap">
<div class="left">這邊很少</div>
<div class="right">這邊很多字···</div>
</div>
CSS代碼:
.wrap {
display: table;
margin: 0 auto;
height: 300px;
width: 300px;
border: 2px solid #0cf;
}
.left {
display: table-cell;
vertical-align: middle;
width: 100px;
}
.right {
display: table-cell;
vertical-align: middle;
width: 200px;
}
2.兩列自適應佈局
HTML代碼:
<div class="content">
<div class="left-box">
<img src="img/a1.jpg" width="70">
</div>
<div class="right-box">...</div>
</div>
CSS代碼:
.content {
display: table;
padding: 10px;
border: 2px solid #999;
}
.left-box {
float: left;
margin-right: 10px;
}
.right-box {
display: table-cell;
padding: 10px;
width: 3000px;
vertical-align: top;
border: 1px solid #ccc;
}
左邊頭像部分使用了float左浮動屬性,左側使用 display: table-cell則實現了兩列自適應佈局。至於.right-box中的width:3000px解釋引用別人的:
display:table-cell 元素生成的匿名table默認table-layout:auto。寬度將基於單元格內容自動調整。當內容足夠多將寬度完全撐開時,再讓某個元素(例如關閉按鈕)右側定位就會有問題。所以設置width:3000px的用途是儘可能的寬的意思。
對於IE6/7,我們可以使用display: inline-block屬性代替。
3.等高佈局
HTML代碼:
<div class="content">
<div class="box1">我和右邊等高</div>
<div class="box2">table表格中的單元格最大的特點之一就是同一行列表元素都等高。所以,很多時候,我們需要等高佈局的時候,就可以藉助display:table-cell屬性。說到table-cell的佈局,不得不說一下“匿名錶格元素創建規則”</div>
</div>
CSS代碼:
.content {
display: table;
padding: 10px;
border: 2px solid #999;
}
.box1 {
display: table-cell;
width: 100px;
border: 1px solid #ccc;
}
.box2 {
display: table-cell;
border: 1px solid #ccc;
}
4.和inline-block組合使用
HTML代碼:
<div class="content">
<div class="left">
<div class="box">A</div>
</div>
<div class="right">
<div class="box">B</div>
</div
</div>
CSS代碼:
.content {
display: table;
padding: 10px;
margin: 10px auto;
width: 1000px;
border: 2px solid #999;
}
.left {
display: table-cell;
text-align: left;
border: 1px solid #0cf;
}
.right {
display: table-cell;
text-align: right;
border: 1px solid #fc0;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
代碼解釋:A和B的父元素均設置了display:table-cell屬性,所以
它們均勻佔據設置了display:table的div元素。而A和B元素設置display:inline-block是爲了讓它們相應text-align的屬性設置。
inline-block 是寬高margin設定有效,參與行內格式化上下文,在行內對齊時使用它自己的框底邊爲基線對齊位置
5.列表佈局
HTML代碼:
<div class="content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
CSS代碼:
.content {
padding: 10px;
margin: 10px auto;
border: 2px solid #999;
}
.content ul {
display: table;
width: 100%;
padding: 0;
}
.content ul li {
display: table-cell;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid #ccc;
}
這類佈局常用浮動佈局(給每個li加上float:left屬性)實現,但這樣做有明顯不足:
- 需要清除浮動
- 不支持不定高列表的浮動
display:table-cell可以代替浮動佈局,但是其不是最好的方法。其他方法有待進一步學習!
最後,說說“匿名錶格元素創建規則”。
CSS2.1表格模型中的元素,可能不會全部包含在除HTML之外的文檔語言中。這時,那些“丟失
”的元素會被模擬出來,從而使得表格模型能夠正常工作。所有的表格元素將會自動在自身周圍生成所需的匿名table對象,使其符合table/inline-table、table-row、table- cell的三層嵌套關係。
簡單來講,我們爲一個元素設置了display:table-cell屬性,而不將其父元素設置爲display:table-row屬性,瀏覽器會默認創建一個表格行。