饮水思源：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>
效果：
