（中級）用CSS3表元實現多欄-中欄流動佈局

李鬆峰發表於2012-12-03
CSSS3

本文節選自《CSS設計指南（第3版》。
第1章完全免費試讀，電子書線上熱賣中：http://www.ituring.com.cn/book/1111

以下內容節選自第5章。

儘管利用HTML的<table>標籤實現多欄佈局是難以接受的，但使用CSS讓佈局形如表格則是絕對可以接受的。這種方法不會導致固定不變的表格佈局，也不會出現難以重新應用樣式的問題（比如在手持裝置上表現為一欄）。說到建立佈局，表格的行為確實是非常符合要求的，下面我來解釋一下。

在最簡單的情況下，表格由三個元素構成。一個表格外包裝<table>，包含著表格行<tr>和表格資料<td>，比如下面這個例子。 

<table>
    <tr> <td>Cell 1</td><td>Cell 2</td><td>Cell 3</td> </tr>
    <tr> <td>Cell 1</td><td>Cell 2</td><td>Cell 3</td> </tr> 
</table>

我們知道，CSS可以把一個HTML元素的display屬性設定為table、table-row和table-cell。通過這種方法可以模擬相應HTML元素的行為。而通過CSS把佈局中的欄設定為table-cell有三個好處。

  • 表元（table-cell）不需要浮動就可以並排顯示，而且直接為它們應用內邊距也不會破壞佈局。
  • 預設情況下，一行中的所有表元高度相同，因而也不需要人造的等高欄效果了。
  • 任何沒有明確設定寬度的欄都是流動的。

這三個好處解決了本章前面學習佈局時遇到的問題。然而，（這裡一定有蹊蹺，對吧？）CSS3表格行為在IE7及更低版本中並沒有得到支援，而且也沒有穩妥的補救措施。如果你（或者你的客戶）願意摒棄IE7，那麼它就是一個既簡單又可靠，而且還很徹底的解決方案。如果真是這樣，我絕對推薦你採用這個方案，前面所講的各種方案就當我沒說。

關鍵是，你甚至都不需要用div外包裝來扮演table和tr元素，僅僅是把三欄的display屬性設定為table-cell就可以了。瀏覽器的排版引擎在碰到沒有錶行（tr）的一組表元時，會自動為它們新增錶行，而在錶行沒有被table元素包圍時，會自動為錶行新增table。因此，你不需要多寫任何標記，只要把每一欄的display屬性設定為table-cell，剩下的事兒就可全部交給瀏覽器負責了。

因此，要實現一個三欄-流動中欄佈局，只需要以下標記

<nav><!-- 內容 --></nav>
<article><!-- 內容 --></article>
<aside><!-- 內容 --></aside>

和以下CSS

nav {display:table-cell; width:150px; padding:10px;
     background:#dcd9c0;}
article {display:table-cell; padding:10px 20px;
     background:#ffed53;}
aside {display:table-cell; width:210px; padding:10px;
     background:#3f7ccf;}

在圖5-5所示固定寬度佈局的HTML基礎上，我們去掉了內部div。而在CSS中，把每一欄的float:left替換成了display:table-cell，同時去掉了中欄的寬度設定。好了，一箇中欄流動、各欄同高，而且能夠方便為內容新增內邊距和邊框的佈局就這麼出爐了（參見圖5-12）！

enter image description here
圖5-12 這個流動佈局使用了CSS3的display:table-cell，讓每個欄形同表元一般

請注意，這個簡單、功能完備的佈局對IE7和IE6可沒有任何膩子指令碼，甚至連個退化的後備方案都沒有。在這些瀏覽器中，三欄會上下堆疊在一起。因此，除非你下定決心不再支援老版本的IE，否則就得使用本章前面講過的其他佈局技術。等吧，等到這些瀏覽器沒人用為止。

最後我們總結一下本節討論的佈局技術。這一節先講了使用內部div的浮動固定寬度佈局技術，它是適合新舊瀏覽器的一種最安全的技術。當然，這種技術要求的工作量也最多。而使用boxsizing:border-box宣告（再加上適用於IE7和IE6的膩子指令碼） 則能提供更直觀的盒模型，而且不用使用內部div。最後，CSS3的display:table-cell方案容易實現又功能完善（想流動就流動，想固定就固定，各欄同高，而且不需要內部div）。然而，它只適合IE7以上版本的瀏覽器。

到目前為止，我們例子中的佈局都是在頁首和頁尾之間簡單地放著三個欄。本章最後，我們在前面三欄佈局的基礎上，再介紹一個稍微複雜一些的例子。

相關文章