飲水思源：Stylin' with CSS - third edition
摘自書
我們知道， 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，剩下的事兒就可全部交給瀏覽器負責了。
試一下
該佈局的一個注意點，min-width和max-width的設定，顧名思義，在瀏覽器中用鼠標滾輪調整顯示大小時，min-width防止過小，max-width防止過大。
然後就是設定table-cell，自適應的那一欄不設置width
代碼（改自書本源碼）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Stylin' with CSS - Figures 5.12 A Three-Column, Fluid Center Layout with CSS3 Table Properties</title> <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Open+Sans:400,700|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'> <script src="helpers/modernizr_dev.js"></script> <style> * { margin: 0; padding: 0; } body { font-family: helvetica, arial, sans-serif; } #wrapper { /* 最小寬度設置爲760px，當瀏覽器寬度小於該值時， 該元素不再自適應，而是部分元素被遮擋住。*/ min-width: 760px; /* 在你放大顯示的時候可以體現，如果不設置， 當你放大的時候，瀏覽器會自適應，導致中欄擠在一起 */ max-width: 1100px; /* 也是防止自適應，如果不設置的話，中欄直接平鋪整個瀏覽器 */ margin: 0 auto; border: 1px solid; overflow: hidden; } nav { display: table-cell; width: 150px; background: #dcd9c0; padding: 10px; } article { display: table-cell; background: #ffed53; padding: 10px 20px; } aside { display: table-cell; width: 210px; background: #3f7ccf; padding: 10px; } footer { clear: both; background: #000; text-align: center; } </style> </head> <body> <div id="wrapper"> <header> <h1>A Three-Column, Fluid Center Layout</h1> </header> <div class="col_wrap"> <nav> <ul> <li><a href="#">Text for First Link</a></li> <li><a href="#">Text for Second Link</a></li> <li><a href="#">Text for Third Link</a></li> </ul> </nav> <article> <h1>Three-Column Layout</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend libero et risus aliquam a cursus felis gravida. Etiam ultricies tristique tellus, vulputate euismod neque elementum ac. Integer at neque in magna lacinia bibendum sit amet sit amet dolor. Nam consequat ullamcorper eros, sed bibendum metus faucibus sit amet. Sed convallis accumsan dui, eu sodales odio mollis nec. Curabitur in nunc sed leo tempor luctus in a dolor. Sed sit amet facilisis sem. Donec scelerisque consectetur velit, vitae bibendum mauris rutrum quis.</p> <h2>This is a Second-Level Heading</h2> <p>Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi dictum vitae. Nam nec egestas libero. Quisque sodales tortor ut tortor egestas eu adipiscing enim pellentesque. Cras condimentum tellus in nisl tincidunt et ornare augue dignissim. Nam laoreet elit vitae lorem tincidunt adipiscing. Maecenas pharetra mattis urna, eu adipi scing diam pharetra ac. Vivamus vulputate odio at velit sagittis a rhoncus lacus lobortis. Morbi porttitor scelerisque est in egestas.</p> </article> <aside> <h3>This is the Sidebar</h3> <p>Integer at neque in magna lacinia bibendum sit amet sit amet dolor. Nam consequat ullamcorper eros, sed bibendum metus faucibus sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </aside> </div> <footer> <p>This is the footer. Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi dictum vitae. Nam nec egestas libero.</p> </footer> </div> </body> </html>
效果：
