三栏-中栏流动布局
三栏-中栏流动布局主要有两种方法：
1.在中栏改变大小时使用负外边距定位右栏（适合较老浏览器）。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title</title> <link rel="stylesheet" type="text/css" href="./normalize.css"> <script> (function() { if (! /*@cc_on!@*/ 0) return; var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', '); var i= e.length; while (i--){ document.createElement(e[i]) } })() </script> <style type="text/css"> * {margin:0; padding:0;} body {font:1em helvetica, arial, sans-serif;} a{ text-decoration: none; color: #fff;} li{ list-style-type: none; } div#main_wrapper{min-width:600px; max-width:1100px;margin:0 auto;} header {padding:5px 10px;background:#3f7ccf;} div#threecolwrap {float:left;width:100%;} div#twocolwrap{ float: left; width: 100%; margin-right:-210px; } nav {float:left;width:150px;background:#f00;padding:20px 0;} nav > * {margin:0 10px;} article {width:auto;margin-left:150px;margin-right:210px;background:#eee;padding:20px 0;} article > * {margin:0 20px;} aside {float:left;width:210px;background:#ffed53;padding:20px 0;} aside > * {margin:0 10px;} footer {clear:both;width:100%;text-align:center;background:#333;} </style> </head> <body> <div id="main_wrapper"> <header>页头</header> <div id="threecolwrap"> <div id="twocolwrap"> <nav> <ul> <li><a href="#">无序列表</a></li> <li><a href="#">无序列表</a></li> <li><a href="#">无序列表</a></li> <li><a href="#">无序列表</a></li> <li><a href="#">无序列表</a></li> </ul> </nav> <article> <div class="inner"> 这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素. </div> </article> </div> <aside> <ul> <li><a href="#">第三列导航链接</a></li> <li><a href="#">第三列导航链接</a></li> <li><a href="#">第三列导航链接</a></li> <li><a href="#">第三列导航链接</a></li> <li><a href="#">第三列导航链接</a></li> </ul> </aside> </div> <footer>页脚</footer> </div> </body> </html>
三栏中的右栏是 210像素宽。为了给右栏腾出空间，中栏 article 元素有一个 210像素的右外边距。当然，光有这个外边距只能把右栏再向右推 210 像素。别急，包围左栏和中栏的两栏外包装上 210像素的负右外边距，会把右栏拉回 article 元素右外边距（在两栏外包装内部右侧）创造的空间内。中栏 aticle 元素的宽度是 auto ，因此它仍然会力求占据浮动左栏剩余的所有空间。可是，一方面它自己的右外边距在两栏外包装内为右栏腾出了空间，另一方面两栏外包装的负右外边距又把右栏拉到了该空间内。总之，这是个很巧妙的设计。
2.使用 CSS3 让栏容器具有类似表格单元的行为（ CSS的 table 属性则要简单得多）。
CSS可以把一个 HTML元素的 display 属性设定为 table 、 table-row 和table-cell 。通过这种方法可以模拟相应 HTML元素的行为。而通过 CSS把布局中的栏设定为 table-cell 有三个好处。
- 单元格（table-cell）不需要浮动就可以并排显示，而且直接为它们应用内边距也不会破坏布局。
- 默认情况下，一行中的所有单元格高度相同，因而也不需要人造的等高栏效果了。
- 任何没有明确设定宽度的栏都是流动的。
但是CSS3表格行为在 IE7及更低版本中并没有得到支持，而且也没有稳妥的补救措施。如果你（或者你的客户）愿意摒弃 IE7，那么它就是一个既简单又可靠，而且还很彻底的解决方案。如果真是这样，我绝对推荐你采用这个方案，前面所讲的各种方案就当我没说。因此，要实现一个三栏流动中栏布局，只需要以下标记：
<nav><!-- 内容 --></nav> <article><!-- 内容 --></article> <aside><!-- 内容 --></aside>
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;}
这个简单、功能完备的布局对 IE7和 IE6可没有任何腻子脚本，甚至连个退化的后备方案都没有。在这些浏览器中，三栏会上下堆叠在一起。因此，除非你下定决心不再支持老版本的 IE，否则就使用其他布局技术吧。
随着页面变得越来越复杂，相同的 HTML元素（如 section 、 article 、 nav ，等等）会出现很多次，为了选择某个元素，必须区分这些相同的标签名。有些人会给每个标签都添加一个不同的类名。但这种做法是不值得提倡的。不仅因为类本身就不该这么用（类应该用于标记具有相同特征的元素），而且这么多类会把标记弄得很乱，让 CSS也很难看懂。为了知道每个类代表哪个元素，你必须不断地查看 HTML。更好的做法是给标记中每个主要区域的顶级元素添加一个 ID，这也是使用 ID的正确方式，ID 就是标识页面中唯一元素用的。然后，这些 ID 就会成为 HTML 标记中的“路标”，放在上下文选择符开头的时候，它们就能起到框定后代元素的作用。这就是在标记中保持类和 ID属性最少的秘诀。而且，相应的上下文选择符也能清晰地传达出路径信息，让人从 CSS中一眼就能看出它要选择哪个元素。
